@npm_leadtech/legal-contracts-ui 0.48.12 → 0.49.0

package/dist/components/AboutUsTemplate.d.ts

@@ -22,7 +22,7 @@ export declare interface AboutUsTemplateProps {
 export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
-    variant?: ButtonVariant;
+    variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
 }
 
@@ -101,6 +101,14 @@ export interface PartnersSectionProps {
     }>;
 }
 
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
+
 export interface SectionHeadingProps {
     title: string;
     description?: string;

package/dist/components/AllDocumentsTemplate.d.ts

@@ -36,7 +36,7 @@ export interface BreadcrumbProps {
 export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
-    variant?: ButtonVariant;
+    variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
 }
 
@@ -125,5 +125,13 @@ export interface LinkedProductProps {
     children: ReactNode;
 }
 
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
+
 export type SubtypeDocumentProps = DefaultSubtypeDocumentProps | AlternativeSubtypeDocumentProps;
 

package/dist/components/AlternativeSubtypeDocument.d.ts

@@ -19,7 +19,7 @@ export interface BaseSubtypeDocumentProps {
 export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
-    variant?: ButtonVariant;
+    variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
 }
 
@@ -28,4 +28,12 @@ export type ButtonSize = 'small' | 'default' | 'large';
 export type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'secondary-black' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
 
 export type IconPosition = 'left' | 'right' | 'top';
+
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
 

package/dist/components/BlogSection.d.ts

@@ -18,7 +18,7 @@ export declare interface BlogSectionProps {
 export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
-    variant?: ButtonVariant;
+    variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
 }
 
@@ -28,6 +28,14 @@ export type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yel
 
 export type IconPosition = 'left' | 'right' | 'top';
 
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
+
 export interface SectionHeadingProps {
     title: string;
     description?: string;

package/dist/components/Button.d.ts

@@ -7,13 +7,21 @@ export declare const Button: ({ children, type, size, variant, iconPosition, cla
 export declare interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
-    variant?: ButtonVariant;
+    variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
 }
 
-export declare type ButtonSize = 'small' | 'default' | 'large';
+export type ButtonSize = 'small' | 'default' | 'large';
 
-export declare type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'secondary-black' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
+export type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'secondary-black' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
 
-export declare type IconPosition = 'left' | 'right' | 'top';
+export type IconPosition = 'left' | 'right' | 'top';
+
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
 

package/dist/components/Button.js

@@ -1,118 +1,19 @@
-import { jsx as g } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
+import { getButtonClasses as p } from "./Button.utils.js";
 import "react";
-const p = {
-  "primary-green": {
-    base: "bg-primary-700 text-white border border-transparent font-semibold",
-    hover: "hover:bg-primary-500",
-    disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
-  },
-  "primary-darkgreen": {
-    base: "bg-primary-900 text-white border border-transparent font-semibold",
-    hover: "hover:bg-primary-800",
-    disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
-  },
-  "primary-yellow": {
-    base: "bg-secondary-500 text-neutral-900 border border-transparent font-semibold",
-    hover: "hover:bg-secondary-400",
-    disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
-  },
-  "primary-white": {
-    base: "bg-white text-neutral-900 font-semibold border border-transparent",
-    hover: "hover:bg-neutral-50",
-    disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
-  },
-  "secondary-green": {
-    base: "bg-white text-primary-700 border-2 border-primary-700 font-semibold",
-    hover: "hover:bg-primary-100 hover:text-primary-800",
-    disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
-  },
-  "secondary-yellow": {
-    base: "bg-transparent text-neutral-900 border-2 border-secondary-500 font-semibold",
-    hover: "hover:bg-secondary-100 hover:border-secondary-600",
-    disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
-  },
-  "secondary-red": {
-    base: "bg-transparent text-error-500 border-2 border-error-500 font-semibold",
-    hover: "hover:bg-error-25",
-    disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
-  },
-  "secondary-black": {
-    base: "bg-transparent text-neutral-800 border-2 border-neutral-600 font-semibold",
-    hover: "hover:bg-neutral-200",
-    disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
-  },
-  "tertiary-bold": {
-    base: "bg-transparent text-primary-700 font-semibold border border-transparent font-semibold p-1.5!",
-    hover: "hover:text-primary-500 hover:bg-primary-200",
-    disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
-  },
-  "tertiary-thin": {
-    base: "bg-transparent text-neutral-800 font-normal border border-transparent p-1.5!",
-    hover: " hover:bg-primary-100",
-    disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
-  },
-  "tertiary-icon": {
-    base: "bg-transparent text-neutral-800 font-medium border border-transparent p-1.5!",
-    hover: "hover:bg-primary-100",
-    disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
-  },
-  "tertiary-link": {
-    base: "bg-transparent text-primary-700 underline underline-offset-2 border border-transparent",
-    hover: "",
-    disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
-  },
-  "icon-black": {
-    base: "bg-black text-white border border-transparent font-semibold",
-    hover: "hover:bg-neutral-800",
-    disabled: "disabled:bg-neutral-400 disabled:cursor-not-allowed"
-  },
-  "icon-grey": {
-    base: "bg-transparent text-neutral-800 border-2 border-neutral-600 font-semibold",
-    hover: "hover:bg-neutral-200",
-    disabled: "disabled:text-neutral-400 disabled:border-neutral-400 disabled:bg-white disabled:cursor-not-allowed"
-  },
-  "icon-mobile": {
-    base: "bg-transparent text-primary-700 border border-neutral-200 border-2 px-8 rounded-sm",
-    hover: "hover:bg-neutral-50",
-    disabled: "disabled:text-neutral-400 disabled:border-neutral-400 disabled:bg-white disabled:cursor-not-allowed"
-  }
-}, m = {
-  small: "px-3 py-1.5 text-small",
-  default: "px-4 py-2.5 text-medium",
-  large: "px-6 py-3 text-big"
-}, x = ({
-  children: a,
-  type: d = "button",
-  size: o = "default",
-  variant: l = "primary-green",
-  iconPosition: t = "left",
-  className: b,
-  disabled: e = !1,
-  ref: s,
-  ...n
+const x = ({
+  children: o,
+  type: r = "button",
+  size: s = "default",
+  variant: e = "primary-green",
+  iconPosition: a = "left",
+  className: n,
+  disabled: t = !1,
+  ref: m,
+  ...u
 }) => {
-  const r = p[l], i = () => t === "top" ? "flex-col" : t === "right" ? "flex-row-reverse" : "flex-row", u = [
-    "inline-flex items-center justify-center gap-2 rounded-sm font-medium transition-all duration-200",
-    "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
-    e ? "" : "cursor-pointer",
-    r.base,
-    r.hover,
-    r.disabled,
-    m[o],
-    i()
-  ].join(" ");
-  return /* @__PURE__ */ g(
-    "button",
-    {
-      ref: s,
-      type: d,
-      disabled: e,
-      "aria-disabled": e,
-      className: `${u} ${b ?? ""}`,
-      ...n,
-      children: a
-    }
-  );
+  const f = p(s, e, a, t, n);
+  return /* @__PURE__ */ l("button", { ref: m, type: r, disabled: t, "aria-disabled": t, className: f, ...u, children: o });
 };
 export {
   x as Button

package/dist/components/Button.utils.d.ts

@@ -0,0 +1,16 @@
+export declare type ButtonSize = 'small' | 'default' | 'large';
+
+export declare type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'secondary-black' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
+
+export declare const getButtonClasses: (size?: ButtonSize, variant?: ResponsiveButtonVariant, iconPosition?: IconPosition, disabled?: boolean, className?: string) => string;
+
+export declare type IconPosition = 'left' | 'right' | 'top';
+
+export declare type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
+

package/dist/components/Button.utils.js

@@ -0,0 +1,102 @@
+const t = {
+  "primary-green": "btn-primary-green",
+  "primary-darkgreen": "btn-primary-darkgreen",
+  "primary-yellow": "btn-primary-yellow",
+  "primary-white": "btn-primary-white",
+  "secondary-green": "btn-secondary-green",
+  "secondary-yellow": "btn-secondary-yellow",
+  "secondary-red": "btn-secondary-red",
+  "secondary-black": "btn-secondary-black",
+  "tertiary-bold": "btn-tertiary-bold",
+  "tertiary-thin": "btn-tertiary-thin",
+  "tertiary-icon": "btn-tertiary-icon",
+  "tertiary-link": "btn-tertiary-link",
+  "icon-black": "btn-icon-black",
+  "icon-grey": "btn-icon-grey",
+  "icon-mobile": "btn-icon-mobile"
+}, o = {
+  "primary-green": "sm:btn-primary-green",
+  "primary-darkgreen": "sm:btn-primary-darkgreen",
+  "primary-yellow": "sm:btn-primary-yellow",
+  "primary-white": "sm:btn-primary-white",
+  "secondary-green": "sm:btn-secondary-green",
+  "secondary-yellow": "sm:btn-secondary-yellow",
+  "secondary-red": "sm:btn-secondary-red",
+  "secondary-black": "sm:btn-secondary-black",
+  "tertiary-bold": "sm:btn-tertiary-bold",
+  "tertiary-thin": "sm:btn-tertiary-thin",
+  "tertiary-icon": "sm:btn-tertiary-icon",
+  "tertiary-link": "sm:btn-tertiary-link",
+  "icon-black": "sm:btn-icon-black",
+  "icon-grey": "sm:btn-icon-grey",
+  "icon-mobile": "sm:btn-icon-mobile"
+}, b = {
+  "primary-green": "md:btn-primary-green",
+  "primary-darkgreen": "md:btn-primary-darkgreen",
+  "primary-yellow": "md:btn-primary-yellow",
+  "primary-white": "md:btn-primary-white",
+  "secondary-green": "md:btn-secondary-green",
+  "secondary-yellow": "md:btn-secondary-yellow",
+  "secondary-red": "md:btn-secondary-red",
+  "secondary-black": "md:btn-secondary-black",
+  "tertiary-bold": "md:btn-tertiary-bold",
+  "tertiary-thin": "md:btn-tertiary-thin",
+  "tertiary-icon": "md:btn-tertiary-icon",
+  "tertiary-link": "md:btn-tertiary-link",
+  "icon-black": "md:btn-icon-black",
+  "icon-grey": "md:btn-icon-grey",
+  "icon-mobile": "md:btn-icon-mobile"
+}, c = {
+  "primary-green": "lg:btn-primary-green",
+  "primary-darkgreen": "lg:btn-primary-darkgreen",
+  "primary-yellow": "lg:btn-primary-yellow",
+  "primary-white": "lg:btn-primary-white",
+  "secondary-green": "lg:btn-secondary-green",
+  "secondary-yellow": "lg:btn-secondary-yellow",
+  "secondary-red": "lg:btn-secondary-red",
+  "secondary-black": "lg:btn-secondary-black",
+  "tertiary-bold": "lg:btn-tertiary-bold",
+  "tertiary-thin": "lg:btn-tertiary-thin",
+  "tertiary-icon": "lg:btn-tertiary-icon",
+  "tertiary-link": "lg:btn-tertiary-link",
+  "icon-black": "lg:btn-icon-black",
+  "icon-grey": "lg:btn-icon-grey",
+  "icon-mobile": "lg:btn-icon-mobile"
+}, s = {
+  "primary-green": "xl:btn-primary-green",
+  "primary-darkgreen": "xl:btn-primary-darkgreen",
+  "primary-yellow": "xl:btn-primary-yellow",
+  "primary-white": "xl:btn-primary-white",
+  "secondary-green": "xl:btn-secondary-green",
+  "secondary-yellow": "xl:btn-secondary-yellow",
+  "secondary-red": "xl:btn-secondary-red",
+  "secondary-black": "xl:btn-secondary-black",
+  "tertiary-bold": "xl:btn-tertiary-bold",
+  "tertiary-thin": "xl:btn-tertiary-thin",
+  "tertiary-icon": "xl:btn-tertiary-icon",
+  "tertiary-link": "xl:btn-tertiary-link",
+  "icon-black": "xl:btn-icon-black",
+  "icon-grey": "xl:btn-icon-grey",
+  "icon-mobile": "xl:btn-icon-mobile"
+}, d = {
+  small: "px-3 py-1.5 text-small",
+  default: "px-4 py-2.5 text-medium",
+  large: "px-6 py-3 text-big"
+}, p = (i = "default", r = "primary-green", n = "left", y = !1, a) => {
+  const l = () => n === "top" ? "flex-col" : n === "right" ? "flex-row-reverse" : "flex-row";
+  return [
+    y ? "" : "cursor-pointer",
+    (() => {
+      if (typeof r == "string")
+        return t[r];
+      const e = [];
+      return r.initial && e.push(t[r.initial]), r.sm && e.push(o[r.sm]), r.md && e.push(b[r.md]), r.lg && e.push(c[r.lg]), r.xl && e.push(s[r.xl]), e.join(" ");
+    })(),
+    d[i],
+    l(),
+    a
+  ].join(" ");
+};
+export {
+  p as getButtonClasses
+};

package/dist/components/CategoriesSection.d.ts

@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
 export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
-    variant?: ButtonVariant;
+    variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
 }
 
@@ -28,6 +28,14 @@ export declare interface CategoriesSectionProps {
 
 export type IconPosition = 'left' | 'right' | 'top';
 
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
+
 export interface SectionHeadingProps {
     title: string;
     description?: string;

package/dist/components/CategoryProductTemplate.d.ts

@@ -36,7 +36,7 @@ export interface BreadcrumbProps {
 export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
-    variant?: ButtonVariant;
+    variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
 }
 
@@ -137,6 +137,14 @@ export interface LinkedProductProps {
     children: ReactNode;
 }
 
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
+
 export interface SectionHeadingProps {
     title: string;
     description?: string;

package/dist/components/ContentItem.d.ts

@@ -17,7 +17,7 @@ export interface BaseSubtypeDocumentProps {
 export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
-    variant?: ButtonVariant;
+    variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
 }
 
@@ -61,5 +61,13 @@ export interface LinkedProductProps {
     children: ReactNode;
 }
 
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
+
 export type SubtypeDocumentProps = DefaultSubtypeDocumentProps | AlternativeSubtypeDocumentProps;
 

package/dist/components/CtaSection.d.ts

@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
 export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
-    variant?: ButtonVariant;
+    variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
 }
 
@@ -22,4 +22,12 @@ export declare interface CtaSectionProps {
 }
 
 export type IconPosition = 'left' | 'right' | 'top';
+
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
 

package/dist/components/DefaultSubtypeDocument.d.ts

@@ -17,7 +17,7 @@ export declare interface BaseSubtypeDocumentProps {
 export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
-    variant?: ButtonVariant;
+    variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
 }
 
@@ -35,5 +35,13 @@ export declare interface DefaultSubtypeDocumentProps extends BaseSubtypeDocument
 
 export type IconPosition = 'left' | 'right' | 'top';
 
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
+
 export declare type SubtypeDocumentProps = DefaultSubtypeDocumentProps | AlternativeSubtypeDocumentProps;
 

package/dist/components/DocsModules.d.ts

@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
 export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
-    variant?: ButtonVariant;
+    variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
 }
 
@@ -21,4 +21,12 @@ export declare interface DocsModuleProps {
 export declare const DocsModules: FC<DocsModuleProps>;
 
 export type IconPosition = 'left' | 'right' | 'top';
+
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
 

package/dist/components/FaqItem.js

@@ -1,45 +1,41 @@
 "use client";
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { useId as m } from "react";
-import { FaqItemWrapper as c } from "./FaqItemWrapper.js";
-import { Markdown as d } from "./Markdown.js";
-import { ChevronDownIcon as n } from "./ChevronDownIcon.js";
-const N = ({
+import { useState as c } from "react";
+import { FaqItemWrapper as p } from "./FaqItemWrapper.js";
+import { Markdown as x } from "./Markdown.js";
+import { ChevronDownIcon as u } from "./ChevronDownIcon.js";
+const g = ({
   question: a,
-  answer: s,
-  showMoreText: o,
-  collapsedButtonText: i = "Show Less",
-  expandedButtonText: l = "Show More"
+  answer: o,
+  showMoreText: n,
+  collapsedButtonText: m,
+  expandedButtonText: s
 }) => {
-  const t = `toggle-${m().replace(/:/g, "")}`;
-  return /* @__PURE__ */ e("div", { className: "text-medium flex flex-col rounded bg-white p-4 text-neutral-800 shadow", children: /* @__PURE__ */ r(c, { question: /* @__PURE__ */ e("span", { className: "font-bold", children: a }), children: [
-    /* @__PURE__ */ e(d, { content: s, className: "text-medium" }),
-    o && /* @__PURE__ */ r("div", { className: "mt-4 rounded-lg bg-neutral-50 p-6", children: [
-      /* @__PURE__ */ e("input", { type: "checkbox", id: t, className: "peer sr-only" }),
-      /* @__PURE__ */ e("p", { className: "mb-4 line-clamp-4 text-xs leading-relaxed wrap-break-word text-neutral-800 peer-checked:line-clamp-none", children: o }),
-      /* @__PURE__ */ r(
-        "label",
+  const i = /* @__PURE__ */ e("span", { className: "font-bold", children: a }), [t, l] = c(!1);
+  return /* @__PURE__ */ e("div", { className: "text-medium flex flex-col rounded bg-white p-4 text-neutral-800 shadow", children: /* @__PURE__ */ r(p, { question: i, children: [
+    /* @__PURE__ */ e(x, { content: o, className: "text-medium" }),
+    n && /* @__PURE__ */ r("div", { className: "mt-4 rounded-lg bg-neutral-50 p-6", children: [
+      /* @__PURE__ */ e(
+        "p",
         {
-          htmlFor: t,
-          className: "text-primary-700 flex cursor-pointer items-center gap-1 text-sm font-medium transition-colors peer-checked:hidden",
-          children: [
-            l,
-            /* @__PURE__ */ e(n, { fill: "var(--primary-700)", className: "h-4 w-4 transition-transform duration-200" })
-          ]
+          className: `mb-4 text-xs leading-relaxed wrap-break-word text-neutral-800 ${t ? "" : "line-clamp-4"}`,
+          children: n
         }
       ),
       /* @__PURE__ */ r(
-        "label",
+        "button",
         {
-          htmlFor: t,
-          className: "text-primary-700 hidden cursor-pointer items-center gap-1 text-sm font-medium transition-colors peer-checked:flex",
+          className: "text-primary-700 flex cursor-pointer items-center gap-1 text-sm font-medium transition-colors",
+          onClick: () => {
+            l((d) => !d);
+          },
           children: [
-            i,
+            t ? m : s,
             /* @__PURE__ */ e(
-              n,
+              u,
               {
                 fill: "var(--primary-700)",
-                className: "h-4 w-4 rotate-180 transition-transform duration-200"
+                className: `h-4 w-4 transition-transform duration-200 ${t ? "rotate-180" : ""} `
               }
             )
           ]
@@ -49,5 +45,5 @@ const N = ({
   ] }) });
 };
 export {
-  N as FaqItem
+  g as FaqItem
 };

package/dist/components/FaqTeaserSection.d.ts

@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
 export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
-    variant?: ButtonVariant;
+    variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
 }
 
@@ -27,6 +27,14 @@ export declare interface FaqTeaserSectionProps {
 
 export type IconPosition = 'left' | 'right' | 'top';
 
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
+
 export interface SectionHeadingProps {
     title: string;
     description?: string;

package/dist/components/GuidelinesSection.d.ts

@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
 export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
     children: ReactNode;
     size?: ButtonSize;
-    variant?: ButtonVariant;
+    variant?: ResponsiveButtonVariant;
     iconPosition?: IconPosition;
 }
 
@@ -32,6 +32,14 @@ export declare interface GuidelinesSectionProps {
 
 export type IconPosition = 'left' | 'right' | 'top';
 
+export type ResponsiveButtonVariant = ButtonVariant | {
+    initial?: ButtonVariant;
+    sm?: ButtonVariant;
+    md?: ButtonVariant;
+    lg?: ButtonVariant;
+    xl?: ButtonVariant;
+};
+
 export interface SectionHeadingProps {
     title: string;
     description?: string;