@ab-demo-ui/demo-react 1.1.0 → 2.0.2

package/dist/hooks.cjs

@@ -0,0 +1 @@
+"use strict";var e=require("react");exports.useDomReady=()=>{const[t,r]=e.useState(!1);return e.useEffect(()=>r(!0),[]),t},exports.useOutsideClick=(t,r)=>{const n=e.useRef(null);return e.useEffect(()=>{const handleClickOutside=e=>{const u=n,s=e.target;!u.current||u.current.contains(s)||r?.some(e=>e.current?.contains(s))||t()};return document.addEventListener("mouseup",handleClickOutside),document.addEventListener("touchend",handleClickOutside),()=>{document.removeEventListener("mouseup",handleClickOutside),document.removeEventListener("touchend",handleClickOutside)}},[t,r]),n},exports.useScreenSize=()=>{const[t,r]=e.useState({width:0,height:0});return e.useEffect(()=>{if("undefined"!=typeof window){const resizeHandler=()=>{r({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",resizeHandler),()=>{window.removeEventListener("resize",resizeHandler)}}},[]),t},exports.useTimeout=(t,r)=>{const n=e.useRef(void 0),u=e.useRef(void 0),s=e.useRef(r),o=e.useRef(t);e.useEffect(()=>{o.current=t},[t]);const c=e.useCallback(()=>{clearTimeout(n.current),u.current&&(s.current-=(new Date).getTime()-u.current)},[]),i=e.useCallback(()=>{n.current&&clearTimeout(n.current),u.current=void 0,s.current=r},[r]),a=e.useCallback(()=>{n.current=setTimeout(()=>{o.current(),i()},s.current),u.current=(new Date).getTime()},[i]);return e.useMemo(()=>({start:a,pause:c,clear:i}),[a,c,i])},exports.useToggle=(t=!1,r)=>{const[n,u]=e.useState(t),[s,o]=e.useState(),c=e.useCallback(()=>{r?(o("showing"),setTimeout(()=>{o(void 0),u(!0)},r)):u(!0)},[r]),i=e.useCallback(()=>{r?(o("hiding"),setTimeout(()=>{o(void 0),u(!1)},r)):u(!1)},[r]),a=e.useCallback(e=>{(void 0===e?n:!e)?i():c()},[n,c,i]);return e.useMemo(()=>({visible:n,toggleState:s,show:c,hide:i,toggle:a}),[i,c,a,s,n])};

package/dist/hooks.d.ts

@@ -0,0 +1,33 @@
+import { RefObject } from 'react';
+
+declare const useDomReady: () => boolean;
+//# sourceMappingURL=useDomReady.d.ts.map
+
+declare const useOutsideClick: <R = unknown>(callback: () => void, excludedRefs?: RefObject<HTMLElement | null>[]) => RefObject<R | null>;
+//# sourceMappingURL=useOutsideClick.d.ts.map
+
+declare const useScreenSize: () => {
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=useScreenSize.d.ts.map
+
+declare const useTimeout: (callback: () => void, delay: number) => {
+    start: () => void;
+    pause: () => void;
+    clear: () => void;
+};
+//# sourceMappingURL=useTimeout.d.ts.map
+
+type ToggleState = "showing" | "hiding";
+type UseToggleReturn = {
+    visible: boolean;
+    toggleState?: ToggleState;
+    show: () => void;
+    hide: () => void;
+    toggle: (forceShow?: boolean) => void;
+};
+declare const useToggle: (initialVisible?: boolean, toggleTime?: number) => UseToggleReturn;
+//# sourceMappingURL=useToggle.d.ts.map
+
+export { useDomReady, useOutsideClick, useScreenSize, useTimeout, useToggle };

package/dist/hooks.es.js

@@ -0,0 +1 @@
+import{useState as e,useEffect as t,useRef as n,useCallback as r,useMemo as o}from"react";const useDomReady=()=>{const[n,r]=e(!1);return t(()=>r(!0),[]),n},useOutsideClick=(e,r)=>{const o=n(null);return t(()=>{const handleClickOutside=t=>{const n=o,i=t.target;!n.current||n.current.contains(i)||r?.some(e=>e.current?.contains(i))||e()};return document.addEventListener("mouseup",handleClickOutside),document.addEventListener("touchend",handleClickOutside),()=>{document.removeEventListener("mouseup",handleClickOutside),document.removeEventListener("touchend",handleClickOutside)}},[e,r]),o},useScreenSize=()=>{const[n,r]=e({width:0,height:0});return t(()=>{if("undefined"!=typeof window){const resizeHandler=()=>{r({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",resizeHandler),()=>{window.removeEventListener("resize",resizeHandler)}}},[]),n},useTimeout=(e,i)=>{const u=n(void 0),c=n(void 0),s=n(i),d=n(e);t(()=>{d.current=e},[e]);const m=r(()=>{clearTimeout(u.current),c.current&&(s.current-=(new Date).getTime()-c.current)},[]),v=r(()=>{u.current&&clearTimeout(u.current),c.current=void 0,s.current=i},[i]),w=r(()=>{u.current=setTimeout(()=>{d.current(),v()},s.current),c.current=(new Date).getTime()},[v]);return o(()=>({start:w,pause:m,clear:v}),[w,m,v])},useToggle=(t=!1,n)=>{const[i,u]=e(t),[c,s]=e(),d=r(()=>{n?(s("showing"),setTimeout(()=>{s(void 0),u(!0)},n)):u(!0)},[n]),m=r(()=>{n?(s("hiding"),setTimeout(()=>{s(void 0),u(!1)},n)):u(!1)},[n]),v=r(e=>{(void 0===e?i:!e)?m():d()},[i,d,m]);return o(()=>({visible:i,toggleState:c,show:d,hide:m,toggle:v}),[m,d,v,c,i])};export{useDomReady,useOutsideClick,useScreenSize,useTimeout,useToggle};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),i=require("react");const t="mtf-ui-icons",r={locale:"tr",baseIconClass:t,componentDefaults:{},setBaseIconClass:()=>{},setLocale:()=>{},setFont:()=>{},setComponentDefaults:()=>{},setTheme:()=>{}},camelToKebab=e=>e.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`),n=i.createContext(r);var a=[],o=[];var s={noScroll:"mtf-Divider--noScroll",Root:"mtf-Divider",horizontal:"mtf-Divider--horizontal",solid:"mtf-Divider--solid",dashed:"mtf-Divider--dashed",dotted:"mtf-Divider--dotted",vertical:"mtf-Divider--vertical",sm:"mtf-Divider--sm","gap-sm":"mtf-Divider--gap-sm",md:"mtf-Divider--md","gap-md":"mtf-Divider--gap-md",lg:"mtf-Divider--lg","gap-lg":"mtf-Divider--gap-lg"};!function(e,i){if(e&&"undefined"!=typeof document){var t,r=!0===i.prepend?"prepend":"append",n=!0===i.singleTag,s="string"==typeof i.container?document.querySelector(i.container):document.getElementsByTagName("head")[0];if(n){var d=a.indexOf(s);-1===d&&(d=a.push(s)-1,o[d]={}),t=o[d]&&o[d][r]?o[d][r]:o[d][r]=c()}else t=c();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),i.attributes)for(var t=Object.keys(i.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],i.attributes[t[n]]);var a="prepend"===r?"afterbegin":"beforeend";return s.insertAdjacentElement(a,e),e}}('.mtf-Divider--noScroll {\n  overflow: hidden;\n}\n\n.mtf-Divider::before {\n  box-sizing: border-box;\n  border-color: var(--theme-color-surface-base-base6);\n  position: absolute;\n  content: "";\n}\n.mtf-Divider.mtf-Divider--horizontal {\n  min-width: 100%;\n  position: relative;\n}\n.mtf-Divider.mtf-Divider--horizontal::before {\n  width: 100%;\n}\n.mtf-Divider.mtf-Divider--horizontal.mtf-Divider--solid::before {\n  border-top-style: solid;\n}\n.mtf-Divider.mtf-Divider--horizontal.mtf-Divider--dashed::before {\n  border-top-style: dashed;\n}\n.mtf-Divider.mtf-Divider--horizontal.mtf-Divider--dotted::before {\n  border-top-style: dotted;\n}\n.mtf-Divider.mtf-Divider--vertical {\n  min-height: 100%;\n  position: relative;\n  justify-content: center;\n}\n.mtf-Divider.mtf-Divider--vertical::before {\n  height: 100%;\n}\n.mtf-Divider.mtf-Divider--vertical.mtf-Divider--solid::before {\n  border-left-style: solid;\n}\n.mtf-Divider.mtf-Divider--vertical.mtf-Divider--dashed::before {\n  border-left-style: dashed;\n}\n.mtf-Divider.mtf-Divider--vertical.mtf-Divider--dotted::before {\n  border-left-style: dotted;\n}\n.mtf-Divider.mtf-Divider--sm.mtf-Divider--horizontal {\n  height: var(--base-sizing-1x);\n}\n.mtf-Divider.mtf-Divider--sm.mtf-Divider--horizontal::before {\n  border-top-width: var(--base-sizing-1x);\n  top: calc(50% - var(--base-sizing-1x) / 2);\n}\n.mtf-Divider.mtf-Divider--sm.mtf-Divider--vertical {\n  width: var(--base-sizing-1x);\n}\n.mtf-Divider.mtf-Divider--sm.mtf-Divider--vertical::before {\n  border-left-width: var(--base-sizing-1x);\n  left: calc(50% - var(--base-sizing-1x) / 2);\n}\n.mtf-Divider.mtf-Divider--gap-sm.mtf-Divider--horizontal {\n  margin-block: var(--base-sizing-6x);\n}\n.mtf-Divider.mtf-Divider--gap-sm.mtf-Divider--vertical {\n  margin-inline: var(--base-sizing-6x);\n}\n.mtf-Divider.mtf-Divider--md.mtf-Divider--horizontal {\n  height: var(--base-sizing-2x);\n}\n.mtf-Divider.mtf-Divider--md.mtf-Divider--horizontal::before {\n  border-top-width: var(--base-sizing-2x);\n  top: calc(50% - var(--base-sizing-2x) / 2);\n}\n.mtf-Divider.mtf-Divider--md.mtf-Divider--vertical {\n  width: var(--base-sizing-2x);\n}\n.mtf-Divider.mtf-Divider--md.mtf-Divider--vertical::before {\n  border-left-width: var(--base-sizing-2x);\n  left: calc(50% - var(--base-sizing-2x) / 2);\n}\n.mtf-Divider.mtf-Divider--gap-md.mtf-Divider--horizontal {\n  margin-block: var(--base-sizing-12x);\n}\n.mtf-Divider.mtf-Divider--gap-md.mtf-Divider--vertical {\n  margin-inline: var(--base-sizing-12x);\n}\n.mtf-Divider.mtf-Divider--lg.mtf-Divider--horizontal {\n  height: var(--base-sizing-4x);\n}\n.mtf-Divider.mtf-Divider--lg.mtf-Divider--horizontal::before {\n  border-top-width: var(--base-sizing-4x);\n  top: calc(50% - var(--base-sizing-4x) / 2);\n}\n.mtf-Divider.mtf-Divider--lg.mtf-Divider--vertical {\n  width: var(--base-sizing-4x);\n}\n.mtf-Divider.mtf-Divider--lg.mtf-Divider--vertical::before {\n  border-left-width: var(--base-sizing-4x);\n  left: calc(50% - var(--base-sizing-4x) / 2);\n}\n.mtf-Divider.mtf-Divider--gap-lg.mtf-Divider--horizontal {\n  margin-block: var(--base-sizing-18x);\n}\n.mtf-Divider.mtf-Divider--gap-lg.mtf-Divider--vertical {\n  margin-inline: var(--base-sizing-18x);\n}',{});const usePropsWithThemeDefaults=(e,t)=>{const r=i.useContext(n).componentDefaults[e],a=!!r?.className&&!!t.className&&`${r.className} ${t.className}`;return{...r,...t,...a&&{className:a}}},Divider=i=>{const{size:t="md",orientation:r="horizontal",gap:n="md",shape:a="solid",style:o,className:d,ref:m}=usePropsWithThemeDefaults("Divider",i),f=(l=d,D=[t,r,`gap-${n}`,a],[(v=s).Root,...(D||[]).flat().filter(e=>!!e&&!!v[e]).map(e=>v[e]),l??""].join(" ").trim()||void 0);var v,l,D;return e.jsx("div",{ref:m,className:f,"data-testid":"dividerItem",style:o})};Divider.displayName="Divider",exports.Divider=Divider,exports.EDKUIProvider=r=>{const[a,o]=i.useState(r.componentDefaults||{}),[s,d]=i.useState(r.baseIconClass||t),[m,f]=i.useState(r.locale||"tr"),[v,l]=i.useState(r.font),[D,b]=i.useState(r.theme),g=i.useMemo(()=>D?((e,i="--theme")=>{const t={},traverse=(e,i)=>{e&&"object"==typeof e&&Object.entries(e).forEach(([e,r])=>{const n=camelToKebab(e),a=`${i}-${n}`;r&&"object"==typeof r&&!Array.isArray(r)?Object.values(r).every(e=>"string"==typeof e||"number"==typeof e||null==e)?Object.entries(r).forEach(([e,i])=>{if(null!=i&&("string"==typeof i||"number"==typeof i)){const r=camelToKebab(e);t[`${a}-${r}`]=String(i)}}):traverse(r,a):"string"!=typeof r&&"number"!=typeof r||(t[a]=String(r))})};return traverse(e,i),t})(D):{},[D]);i.useInsertionEffect(()=>{const e=document.documentElement;return Object.entries(g).forEach(([i,t])=>{e.style.setProperty(i,t)}),v&&e.style.setProperty("--theme-typography-font-family",v),()=>{Object.keys(g).forEach(i=>{e.style.removeProperty(i)}),e.style.removeProperty("--theme-typography-font-family")}},[v,g]);const h=i.useMemo(()=>({componentDefaults:a,locale:m,baseIconClass:s,theme:D,setBaseIconClass:d,setComponentDefaults:o,setLocale:f,setFont:l,setTheme:b}),[s,a,m,D]);return e.jsx(n,{value:h,children:r.children})};

package/dist/index.d.ts

@@ -0,0 +1,240 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties, Ref, PropsWithChildren } from 'react';
+
+type Size3 = "sm" | "md" | "lg";
+type StandardProps = {
+    className?: string;
+    style?: CSSProperties;
+};
+type RefType<R> = {
+    ref?: Ref<R>;
+};
+type PropsWithRef<P = unknown, R = unknown> = P & StandardProps & RefType<R>;
+
+type DividerProps = {
+    orientation?: "vertical" | "horizontal";
+    size?: Size3;
+    gap?: Size3;
+    shape?: "dotted" | "dashed" | "solid";
+};
+
+type ComponentDefaultableProps = {
+    Divider?: DividerProps;
+};
+
+/**
+ * COLORS
+ */
+type ColorSurface = {
+    primary?: ExtendedColorStateVariations;
+    secondary?: Partial<ColorStateVariations & {
+        negative?: string;
+    }>;
+    info?: ExtendedColorStateVariations;
+    danger?: ExtendedColorStateVariations;
+    success?: ExtendedColorStateVariations;
+    warning?: ExtendedColorStateVariations;
+    light?: ExtendedColorStateVariations;
+    base?: {
+        bgLight?: string;
+        bgDark?: string;
+        base1?: string;
+        base2?: string;
+        base3?: string;
+        base4?: string;
+        base5?: string;
+        base6?: string;
+        base7?: string;
+        base8?: string;
+        globalLight?: string;
+        lightOverlay50?: string;
+        lightOverlay75?: string;
+        lightOverlay90?: string;
+        lightOverlay25?: string;
+        darkOverlay15?: string;
+        darkOverlay50?: string;
+    };
+};
+type ColorBorder = {
+    light?: ColorStateVariations;
+    primary?: ColorStateVariations & {
+        focus?: string;
+    };
+    secondary?: ColorStateVariations;
+    info?: ColorStateVariations;
+    danger?: ColorStateVariations;
+    success?: ColorStateVariations;
+    warning?: ColorStateVariations;
+};
+type ColorText = {
+    base?: {
+        textDark?: string;
+        textLight?: string;
+        title?: string;
+        titleLight?: string;
+        subtitle?: string;
+        subtitleLight?: string;
+        caption?: string;
+        captionLight?: string;
+        disabled?: string;
+        disabledLight?: string;
+        globalDark?: string;
+        globalLight?: string;
+        darkOverlay25?: string;
+        darkOverlay40?: string;
+        darkOverlay50?: string;
+        darkOverlay75?: string;
+        lightOverlay50?: string;
+        lightOverlay75?: string;
+        lightOverlay90?: string;
+        defaultOverlay50?: string;
+    };
+    primary?: ColorStateVariations & {
+        opposite?: string;
+    };
+    secondary?: ColorStateVariations;
+    light?: ColorStateVariations;
+    info?: ColorStateVariations;
+    danger?: ColorStateVariations;
+    success?: ColorStateVariations;
+    warning?: ColorStateVariations;
+};
+type ColorSemantic = {
+    primary?: ColorScale<"primary">;
+    secondary?: ColorScale<"secondary">;
+    neutral?: ColorScale<"neutral">;
+    accent?: ColorScale<"accent">;
+    info?: ColorScale<"info">;
+    success?: ColorScale<"success">;
+    warning?: ColorScale<"warning">;
+    danger?: ColorScale<"danger">;
+    flag?: ColorScale<"flag">;
+    grayscale?: ColorScale<"grayscale">;
+    base?: ColorScale<"base">;
+};
+/**
+ * TYPOGRAPHY
+ */
+type Typography = {
+    fontFamily?: string;
+    heading?: {
+        [K in `heading${1 | 2 | 3 | 4 | 5 | 6}`]?: TypographyStyle;
+    };
+    display?: {
+        [K in `${"lg" | "md" | "sm"}`]?: TypographyStyle;
+    };
+    body?: {
+        [K in `${"lg" | "md" | "sm" | "xs" | "xxs"}`]?: TypographyStyle;
+    };
+    base?: {
+        [K in "xl" | "lg" | "md" | "sm" | "xs" | "xxs"]?: {
+            [J in `${K}-${500 | 600 | 700}`]?: TypographyStyle;
+        };
+    };
+};
+/**
+ * SIZING AND SPACING
+ */
+type Sizing = {
+    radius?: {
+        default?: string;
+        round?: string;
+    };
+    limit?: {
+        inputMinWidth?: string;
+    };
+};
+/**
+ * ELEVATION AND SHADOW
+ */
+type Elevation = {
+    [K in `elevation${1 | 2 | 3 | 4 | 5 | 6}`]?: ElevationStyle;
+} & {
+    focusring?: ElevationStyle;
+    focusringWhite?: ElevationStyle;
+};
+/**
+ * GRID SYSTEM
+ */
+type Grid = {
+    gutter?: {
+        gutter?: string;
+    };
+    breakpoint?: GridBreakpoint;
+    container?: GridBreakpoint;
+};
+/**
+ * Helping types
+ */
+type ColorScale<T extends string> = {
+    [K in `${T}-${50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}`]?: string;
+};
+type ElevationStyle = {
+    x?: string;
+    y?: string;
+    blur?: string;
+    spread?: string;
+    shadow?: string;
+};
+type GridBreakpoint = {
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+};
+type ColorStateVariations = {
+    default?: string;
+    hover?: string;
+    active?: string;
+    disabled?: string;
+};
+type ExtendedColorStateVariations = ColorStateVariations & {
+    negative?: string;
+    inverse?: string;
+};
+type TypographyStyle = {
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string | number;
+    fontStyle?: string;
+    lineHeight?: string;
+    letterSpacing?: string;
+    textDecoration?: string;
+    textCase?: string;
+};
+
+type MotifProviderProps = {
+    locale?: Locale;
+    baseIconClass?: string;
+    componentDefaults?: ComponentDefaults;
+    font?: string;
+    theme?: Theme;
+};
+type Locale = "tr" | "en";
+type Theme = {
+    color?: {
+        surface?: ColorSurface;
+        border?: ColorBorder;
+        text?: ColorText;
+        semantic?: ColorSemantic;
+    };
+    typography?: Typography;
+    sizing?: Sizing;
+    elevation?: Elevation;
+    grid?: Grid;
+    opacity?: Record<string, string | number>;
+};
+type ComponentDefaults = ComponentDefaultsWithStandardProps<ComponentDefaultableProps, StandardProps>;
+type ComponentDefaultsWithStandardProps<T, TCommon> = {
+    [K in keyof T]: T[K] extends infer U ? U & TCommon : never;
+};
+
+declare const MotifProvider: (props: PropsWithChildren<MotifProviderProps>) => react_jsx_runtime.JSX.Element;
+
+declare const Divider: {
+    (props: PropsWithRef<DividerProps, HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=Divider.d.ts.map
+
+export { Divider, MotifProvider as EDKUIProvider };

package/dist/index.es.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{createContext as i,useState as t,useMemo as r,useInsertionEffect as n,useContext as o}from"react";const a="mtf-ui-icons",camelToKebab=e=>e.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`),d=i({locale:"tr",baseIconClass:a,componentDefaults:{},setBaseIconClass:()=>{},setLocale:()=>{},setFont:()=>{},setComponentDefaults:()=>{},setTheme:()=>{}}),MotifProvider=i=>{const[o,s]=t(i.componentDefaults||{}),[m,f]=t(i.baseIconClass||a),[v,l]=t(i.locale||"tr"),[D,b]=t(i.font),[g,h]=t(i.theme),p=r(()=>g?((e,i="--theme")=>{const t={},traverse=(e,i)=>{e&&"object"==typeof e&&Object.entries(e).forEach(([e,r])=>{const n=camelToKebab(e),o=`${i}-${n}`;r&&"object"==typeof r&&!Array.isArray(r)?Object.values(r).every(e=>"string"==typeof e||"number"==typeof e||null==e)?Object.entries(r).forEach(([e,i])=>{if(null!=i&&("string"==typeof i||"number"==typeof i)){const r=camelToKebab(e);t[`${o}-${r}`]=String(i)}}):traverse(r,o):"string"!=typeof r&&"number"!=typeof r||(t[o]=String(r))})};return traverse(e,i),t})(g):{},[g]);n(()=>{const e=document.documentElement;return Object.entries(p).forEach(([i,t])=>{e.style.setProperty(i,t)}),D&&e.style.setProperty("--theme-typography-font-family",D),()=>{Object.keys(p).forEach(i=>{e.style.removeProperty(i)}),e.style.removeProperty("--theme-typography-font-family")}},[D,p]);const y=r(()=>({componentDefaults:o,locale:v,baseIconClass:m,theme:g,setBaseIconClass:f,setComponentDefaults:s,setLocale:l,setFont:b,setTheme:h}),[m,o,v,g]);return e(d,{value:y,children:i.children})};var s=[],m=[];var f={noScroll:"mtf-Divider--noScroll",Root:"mtf-Divider",horizontal:"mtf-Divider--horizontal",solid:"mtf-Divider--solid",dashed:"mtf-Divider--dashed",dotted:"mtf-Divider--dotted",vertical:"mtf-Divider--vertical",sm:"mtf-Divider--sm","gap-sm":"mtf-Divider--gap-sm",md:"mtf-Divider--md","gap-md":"mtf-Divider--gap-md",lg:"mtf-Divider--lg","gap-lg":"mtf-Divider--gap-lg"};!function(e,i){if(e&&"undefined"!=typeof document){var t,r=!0===i.prepend?"prepend":"append",n=!0===i.singleTag,o="string"==typeof i.container?document.querySelector(i.container):document.getElementsByTagName("head")[0];if(n){var a=s.indexOf(o);-1===a&&(a=s.push(o)-1,m[a]={}),t=m[a]&&m[a][r]?m[a][r]:m[a][r]=c()}else t=c();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),i.attributes)for(var t=Object.keys(i.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],i.attributes[t[n]]);var a="prepend"===r?"afterbegin":"beforeend";return o.insertAdjacentElement(a,e),e}}('.mtf-Divider--noScroll {\n  overflow: hidden;\n}\n\n.mtf-Divider::before {\n  box-sizing: border-box;\n  border-color: var(--theme-color-surface-base-base6);\n  position: absolute;\n  content: "";\n}\n.mtf-Divider.mtf-Divider--horizontal {\n  min-width: 100%;\n  position: relative;\n}\n.mtf-Divider.mtf-Divider--horizontal::before {\n  width: 100%;\n}\n.mtf-Divider.mtf-Divider--horizontal.mtf-Divider--solid::before {\n  border-top-style: solid;\n}\n.mtf-Divider.mtf-Divider--horizontal.mtf-Divider--dashed::before {\n  border-top-style: dashed;\n}\n.mtf-Divider.mtf-Divider--horizontal.mtf-Divider--dotted::before {\n  border-top-style: dotted;\n}\n.mtf-Divider.mtf-Divider--vertical {\n  min-height: 100%;\n  position: relative;\n  justify-content: center;\n}\n.mtf-Divider.mtf-Divider--vertical::before {\n  height: 100%;\n}\n.mtf-Divider.mtf-Divider--vertical.mtf-Divider--solid::before {\n  border-left-style: solid;\n}\n.mtf-Divider.mtf-Divider--vertical.mtf-Divider--dashed::before {\n  border-left-style: dashed;\n}\n.mtf-Divider.mtf-Divider--vertical.mtf-Divider--dotted::before {\n  border-left-style: dotted;\n}\n.mtf-Divider.mtf-Divider--sm.mtf-Divider--horizontal {\n  height: var(--base-sizing-1x);\n}\n.mtf-Divider.mtf-Divider--sm.mtf-Divider--horizontal::before {\n  border-top-width: var(--base-sizing-1x);\n  top: calc(50% - var(--base-sizing-1x) / 2);\n}\n.mtf-Divider.mtf-Divider--sm.mtf-Divider--vertical {\n  width: var(--base-sizing-1x);\n}\n.mtf-Divider.mtf-Divider--sm.mtf-Divider--vertical::before {\n  border-left-width: var(--base-sizing-1x);\n  left: calc(50% - var(--base-sizing-1x) / 2);\n}\n.mtf-Divider.mtf-Divider--gap-sm.mtf-Divider--horizontal {\n  margin-block: var(--base-sizing-6x);\n}\n.mtf-Divider.mtf-Divider--gap-sm.mtf-Divider--vertical {\n  margin-inline: var(--base-sizing-6x);\n}\n.mtf-Divider.mtf-Divider--md.mtf-Divider--horizontal {\n  height: var(--base-sizing-2x);\n}\n.mtf-Divider.mtf-Divider--md.mtf-Divider--horizontal::before {\n  border-top-width: var(--base-sizing-2x);\n  top: calc(50% - var(--base-sizing-2x) / 2);\n}\n.mtf-Divider.mtf-Divider--md.mtf-Divider--vertical {\n  width: var(--base-sizing-2x);\n}\n.mtf-Divider.mtf-Divider--md.mtf-Divider--vertical::before {\n  border-left-width: var(--base-sizing-2x);\n  left: calc(50% - var(--base-sizing-2x) / 2);\n}\n.mtf-Divider.mtf-Divider--gap-md.mtf-Divider--horizontal {\n  margin-block: var(--base-sizing-12x);\n}\n.mtf-Divider.mtf-Divider--gap-md.mtf-Divider--vertical {\n  margin-inline: var(--base-sizing-12x);\n}\n.mtf-Divider.mtf-Divider--lg.mtf-Divider--horizontal {\n  height: var(--base-sizing-4x);\n}\n.mtf-Divider.mtf-Divider--lg.mtf-Divider--horizontal::before {\n  border-top-width: var(--base-sizing-4x);\n  top: calc(50% - var(--base-sizing-4x) / 2);\n}\n.mtf-Divider.mtf-Divider--lg.mtf-Divider--vertical {\n  width: var(--base-sizing-4x);\n}\n.mtf-Divider.mtf-Divider--lg.mtf-Divider--vertical::before {\n  border-left-width: var(--base-sizing-4x);\n  left: calc(50% - var(--base-sizing-4x) / 2);\n}\n.mtf-Divider.mtf-Divider--gap-lg.mtf-Divider--horizontal {\n  margin-block: var(--base-sizing-18x);\n}\n.mtf-Divider.mtf-Divider--gap-lg.mtf-Divider--vertical {\n  margin-inline: var(--base-sizing-18x);\n}',{});const usePropsWithThemeDefaults=(e,i)=>{const t=o(d).componentDefaults[e],r=!!t?.className&&!!i.className&&`${t.className} ${i.className}`;return{...t,...i,...r&&{className:r}}},Divider=i=>{const{size:t="md",orientation:r="horizontal",gap:n="md",shape:o="solid",style:a,className:d,ref:s}=usePropsWithThemeDefaults("Divider",i),m=(l=d,D=[t,r,`gap-${n}`,o],[(v=f).Root,...(D||[]).flat().filter(e=>!!e&&!!v[e]).map(e=>v[e]),l??""].join(" ").trim()||void 0);var v,l,D;return e("div",{ref:s,className:m,"data-testid":"dividerItem",style:a})};Divider.displayName="Divider";export{Divider,MotifProvider as EDKUIProvider};