@nuralyui/divider 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle.js +23 -8
- package/divider.component.d.ts +1 -1
- package/divider.component.js.map +1 -1
- package/divider.style.js +20 -5
- package/divider.style.js.map +1 -1
- package/divider.types.js.map +1 -1
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import{css as i,LitElement as r,html as t}from"lit";import{property as e,customElement as d}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{styleMap as
|
|
1
|
+
import{css as i,LitElement as r,html as t}from"lit";import{property as e,customElement as d}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{styleMap as n}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as o}from"@nuralyui/common/mixins";var l=i`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
box-sizing: border-box;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
:host([type="vertical"]) {
|
|
8
|
-
display: inline-
|
|
8
|
+
display: inline-flex;
|
|
9
|
+
align-self: stretch; /* Stretch to parent height in flex containers */
|
|
10
|
+
height: auto;
|
|
9
11
|
}
|
|
10
12
|
|
|
11
13
|
.divider {
|
|
@@ -25,8 +27,8 @@ import{css as i,LitElement as r,html as t}from"lit";import{property as e,customE
|
|
|
25
27
|
clear: both;
|
|
26
28
|
width: 100%;
|
|
27
29
|
min-width: 100%;
|
|
28
|
-
margin: var(--nuraly-divider-margin-vertical,
|
|
29
|
-
border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.
|
|
30
|
+
margin: var(--nuraly-divider-margin-vertical, 10px) 0;
|
|
31
|
+
border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
|
|
30
32
|
}
|
|
31
33
|
|
|
32
34
|
/* Horizontal with text */
|
|
@@ -46,7 +48,7 @@ import{css as i,LitElement as r,html as t}from"lit";import{property as e,customE
|
|
|
46
48
|
.divider--horizontal.divider--with-text::after {
|
|
47
49
|
position: relative;
|
|
48
50
|
width: 50%;
|
|
49
|
-
border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.
|
|
51
|
+
border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
|
|
50
52
|
border-block-end: 0;
|
|
51
53
|
transform: translateY(50%);
|
|
52
54
|
content: '';
|
|
@@ -91,7 +93,20 @@ import{css as i,LitElement as r,html as t}from"lit";import{property as e,customE
|
|
|
91
93
|
margin: 0 var(--nuraly-divider-margin-horizontal, 8px);
|
|
92
94
|
vertical-align: middle;
|
|
93
95
|
border-top: 0;
|
|
94
|
-
border-inline-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.
|
|
96
|
+
border-inline-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* Full height vertical divider when in flex container */
|
|
100
|
+
:host([type="vertical"]) {
|
|
101
|
+
height: 100%;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
:host([type="vertical"]) .divider--vertical {
|
|
105
|
+
height: 100%;
|
|
106
|
+
align-self: stretch;
|
|
107
|
+
top: 0;
|
|
108
|
+
vertical-align: top;
|
|
109
|
+
border-inline-start-color: var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
|
|
95
110
|
}
|
|
96
111
|
|
|
97
112
|
/* Variant styles */
|
|
@@ -119,8 +134,8 @@ import{css as i,LitElement as r,html as t}from"lit";import{property as e,customE
|
|
|
119
134
|
.divider--horizontal.divider--large {
|
|
120
135
|
margin: var(--nuraly-divider-margin-vertical-large) 0;
|
|
121
136
|
}
|
|
122
|
-
`,v=function(i,r,t,e){for(var d,a=arguments.length,
|
|
123
|
-
<div class=${a(d)} style=${o
|
|
137
|
+
`,v=function(i,r,t,e){for(var d,a=arguments.length,n=a<3?r:null===e?e=Object.getOwnPropertyDescriptor(r,t):e,o=i.length-1;o>=0;o--)(d=i[o])&&(n=(a<3?d(n):a>3?d(r,t,n):d(r,t))||n);return a>3&&n&&Object.defineProperty(r,t,n),n};let s=class extends(o(r)){constructor(){super(...arguments),this.type="horizontal",this.dashed=!1,this.variant="solid",this.orientation="center",this.plain=!0}get hasText(){var i;const r=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector("slot");return((null==r?void 0:r.assignedNodes({flatten:!0}))||[]).some(i=>{var r;return i.nodeType===Node.TEXT_NODE&&(null===(r=i.textContent)||void 0===r?void 0:r.trim())||i.nodeType===Node.ELEMENT_NODE})}render(){const i=this.dashed?"dashed":this.variant,r="horizontal"===this.type,e="vertical"===this.type,d={divider:!0,"divider--horizontal":r,"divider--vertical":e,"divider--with-text":r&&this.hasText,"divider--plain":this.plain,[`divider--${i}`]:!0,[`divider--${this.orientation}`]:r&&this.hasText,[`divider--${this.size}`]:r&&!!this.size},o={};if(void 0!==this.orientationMargin&&r&&this.hasText){const i="number"==typeof this.orientationMargin?`${this.orientationMargin}px`:this.orientationMargin;"start"===this.orientation?o["--nuraly-divider-orientation-margin-left"]=i:"end"===this.orientation&&(o["--nuraly-divider-orientation-margin-right"]=i)}return e?t`<div class=${a(d)}></div>`:this.hasText?t`
|
|
138
|
+
<div class=${a(d)} style=${n(o)}>
|
|
124
139
|
<span class="divider__text">
|
|
125
140
|
<slot></slot>
|
|
126
141
|
</span>
|
package/divider.component.d.ts
CHANGED
|
@@ -84,7 +84,7 @@ export declare class NrDividerElement extends NrDividerElement_base {
|
|
|
84
84
|
* Check if divider has text content
|
|
85
85
|
*/
|
|
86
86
|
private get hasText();
|
|
87
|
-
render(): import("lit").TemplateResult<1>;
|
|
87
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
88
88
|
}
|
|
89
89
|
export {};
|
|
90
90
|
//# sourceMappingURL=divider.component.d.ts.map
|
package/divider.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"divider.component.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"divider.component.js","sourceRoot":"","sources":["../../../../src/components/divider/divider.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport styles from \"./divider.style.js\";\nimport {\n DividerType,\n DividerOrientation,\n DividerVariant,\n DividerSize\n} from \"./divider.types.js\";\n\n/**\n * @element nr-divider\n * \n * @summary A divider line separates different content.\n * \n * @description\n * The Divider component is used to divide sections of content or inline text.\n * Based on Ant Design Divider component.\n * \n * @prop {DividerType} type - The direction type of divider (horizontal or vertical)\n * @prop {boolean} dashed - Whether line is dashed (deprecated, use variant instead)\n * @prop {DividerVariant} variant - Line style variant (solid, dashed, dotted)\n * @prop {DividerOrientation} orientation - Position of title inside divider (start, center, end)\n * @prop {string | number} orientationMargin - Margin between title and closest border\n * @prop {boolean} plain - Divider text show as plain style\n * @prop {DividerSize} size - Size of divider (only for horizontal: small, middle, large)\n * \n * @slot - The title/text content to display in the divider\n * \n * @cssprop --nuraly-divider-color - Border color\n * @cssprop --nuraly-divider-text-color - Text color\n * @cssprop --nuraly-divider-font-size - Font size for title\n * @cssprop --nuraly-divider-margin - Vertical margin for horizontal divider\n * @cssprop --nuraly-divider-orientation-margin - Margin between text and edge\n * \n * @example\n * ```html\n * <!-- Basic horizontal divider -->\n * <nr-divider></nr-divider>\n * \n * <!-- Divider with text -->\n * <nr-divider>Text</nr-divider>\n * \n * <!-- Vertical divider -->\n * <nr-divider type=\"vertical\"></nr-divider>\n * \n * <!-- Dashed divider with text -->\n * <nr-divider variant=\"dashed\" orientation=\"start\">Left Text</nr-divider>\n * ```\n */\n@customElement('nr-divider')\nexport class NrDividerElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /**\n * The direction type of divider\n * @type {DividerType}\n */\n @property({ type: String })\n type: DividerType = DividerType.Horizontal;\n\n /**\n * Whether line is dashed (deprecated, use variant instead)\n * @deprecated Use variant=\"dashed\" instead\n * @type {boolean}\n */\n @property({ type: Boolean })\n dashed = false;\n\n /**\n * Line style variant\n * @type {DividerVariant}\n */\n @property({ type: String })\n variant: DividerVariant = DividerVariant.Solid;\n\n /**\n * Position of title inside divider\n * @type {DividerOrientation}\n */\n @property({ type: String })\n orientation: DividerOrientation = DividerOrientation.Center;\n\n /**\n * Margin between title and closest border\n * Accepts string with units or number (defaults to px)\n * @type {string | number}\n */\n @property({ type: String, attribute: 'orientation-margin' })\n orientationMargin?: string | number;\n\n /**\n * Divider text show as plain style\n * @type {boolean}\n */\n @property({ type: Boolean })\n plain = true;\n\n /**\n * Size of divider (only for horizontal)\n * @type {DividerSize}\n */\n @property({ type: String })\n size?: DividerSize;\n\n /**\n * Check if divider has text content\n */\n private get hasText(): boolean {\n const slot = this.shadowRoot?.querySelector('slot');\n const nodes = slot?.assignedNodes({ flatten: true }) || [];\n return nodes.some(node => \n node.nodeType === Node.TEXT_NODE && node.textContent?.trim() ||\n node.nodeType === Node.ELEMENT_NODE\n );\n }\n\n override render() {\n // Support deprecated dashed prop\n const effectiveVariant = this.dashed ? DividerVariant.Dashed : this.variant;\n \n const isHorizontal = this.type === DividerType.Horizontal;\n const isVertical = this.type === DividerType.Vertical;\n\n const classes = {\n 'divider': true,\n 'divider--horizontal': isHorizontal,\n 'divider--vertical': isVertical,\n 'divider--with-text': isHorizontal && this.hasText,\n 'divider--plain': this.plain,\n [`divider--${effectiveVariant}`]: true,\n [`divider--${this.orientation}`]: isHorizontal && this.hasText,\n [`divider--${this.size}`]: isHorizontal && !!this.size\n };\n\n // Calculate orientation margin style\n const orientationMarginStyle: Record<string, string> = {};\n if (this.orientationMargin !== undefined && isHorizontal && this.hasText) {\n const marginValue = typeof this.orientationMargin === 'number' \n ? `${this.orientationMargin}px` \n : this.orientationMargin;\n \n if (this.orientation === DividerOrientation.Start) {\n orientationMarginStyle['--nuraly-divider-orientation-margin-left'] = marginValue;\n } else if (this.orientation === DividerOrientation.End) {\n orientationMarginStyle['--nuraly-divider-orientation-margin-right'] = marginValue;\n }\n }\n\n // Vertical divider (no text support)\n if (isVertical) {\n return html`<div class=${classMap(classes)}></div>`;\n }\n\n // Horizontal divider without text\n if (!this.hasText) {\n return html`<div class=${classMap(classes)}></div>`;\n }\n\n // Horizontal divider with text\n return html`\n <div class=${classMap(classes)} style=${styleMap(orientationMarginStyle)}>\n <span class=\"divider__text\">\n <slot></slot>\n </span>\n </div>\n `;\n }\n}"]}
|
package/divider.style.js
CHANGED
|
@@ -6,7 +6,9 @@ export default css `
|
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
:host([type="vertical"]) {
|
|
9
|
-
display: inline-
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
align-self: stretch; /* Stretch to parent height in flex containers */
|
|
11
|
+
height: auto;
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
.divider {
|
|
@@ -26,8 +28,8 @@ export default css `
|
|
|
26
28
|
clear: both;
|
|
27
29
|
width: 100%;
|
|
28
30
|
min-width: 100%;
|
|
29
|
-
margin: var(--nuraly-divider-margin-vertical,
|
|
30
|
-
border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.
|
|
31
|
+
margin: var(--nuraly-divider-margin-vertical, 10px) 0;
|
|
32
|
+
border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
|
|
31
33
|
}
|
|
32
34
|
|
|
33
35
|
/* Horizontal with text */
|
|
@@ -47,7 +49,7 @@ export default css `
|
|
|
47
49
|
.divider--horizontal.divider--with-text::after {
|
|
48
50
|
position: relative;
|
|
49
51
|
width: 50%;
|
|
50
|
-
border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.
|
|
52
|
+
border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
|
|
51
53
|
border-block-end: 0;
|
|
52
54
|
transform: translateY(50%);
|
|
53
55
|
content: '';
|
|
@@ -92,7 +94,20 @@ export default css `
|
|
|
92
94
|
margin: 0 var(--nuraly-divider-margin-horizontal, 8px);
|
|
93
95
|
vertical-align: middle;
|
|
94
96
|
border-top: 0;
|
|
95
|
-
border-inline-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.
|
|
97
|
+
border-inline-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* Full height vertical divider when in flex container */
|
|
101
|
+
:host([type="vertical"]) {
|
|
102
|
+
height: 100%;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
:host([type="vertical"]) .divider--vertical {
|
|
106
|
+
height: 100%;
|
|
107
|
+
align-self: stretch;
|
|
108
|
+
top: 0;
|
|
109
|
+
vertical-align: top;
|
|
110
|
+
border-inline-start-color: var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
|
|
96
111
|
}
|
|
97
112
|
|
|
98
113
|
/* Variant styles */
|
package/divider.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"divider.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"divider.style.js","sourceRoot":"","sources":["../../../../src/components/divider/divider.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIjB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport default css`\n :host {\n display: block;\n box-sizing: border-box;\n }\n\n :host([type=\"vertical\"]) {\n display: inline-flex;\n align-self: stretch; /* Stretch to parent height in flex containers */\n height: auto;\n }\n\n .divider {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n color: var(--nuraly-divider-text-color);\n font-size: var(--nuraly-divider-font-size);\n line-height: 1.5715;\n list-style: none;\n font-family: inherit;\n }\n\n /* Horizontal Divider */\n .divider--horizontal {\n display: flex;\n clear: both;\n width: 100%;\n min-width: 100%;\n margin: var(--nuraly-divider-margin-vertical, 10px) 0;\n border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));\n }\n\n /* Horizontal with text */\n .divider--horizontal.divider--with-text {\n display: flex;\n align-items: center;\n margin: var(--nuraly-divider-margin-vertical) 0;\n color: var(--nuraly-divider-text-color);\n font-weight: 500;\n font-size: var(--nuraly-divider-font-size);\n white-space: nowrap;\n text-align: center;\n border-block-start: 0;\n }\n\n .divider--horizontal.divider--with-text::before,\n .divider--horizontal.divider--with-text::after {\n position: relative;\n width: 50%;\n border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));\n border-block-end: 0;\n transform: translateY(50%);\n content: '';\n }\n\n /* Text positioning */\n .divider--start::before {\n width: var(--nuraly-divider-orientation-margin-left, 5%);\n }\n\n .divider--start::after {\n width: 95%;\n }\n\n .divider--end::before {\n width: 95%;\n }\n\n .divider--end::after {\n width: var(--nuraly-divider-orientation-margin-right, 5%);\n }\n\n /* Text wrapper */\n .divider__text {\n display: inline-block;\n padding: 0 var(--nuraly-divider-text-padding, 1em);\n color: var(--nuraly-divider-text-color, rgba(0, 0, 0, 0.88));\n font-size: var(--nuraly-divider-font-size, 1rem);\n }\n\n /* Plain text style */\n .divider--plain .divider__text {\n font-weight: normal;\n }\n\n /* Vertical Divider */\n .divider--vertical {\n position: relative;\n top: -0.06em;\n display: inline-block;\n height: 0.9em;\n margin: 0 var(--nuraly-divider-margin-horizontal, 8px);\n vertical-align: middle;\n border-top: 0;\n border-inline-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));\n }\n\n /* Full height vertical divider when in flex container */\n :host([type=\"vertical\"]) {\n height: 100%;\n }\n\n :host([type=\"vertical\"]) .divider--vertical {\n height: 100%;\n align-self: stretch;\n top: 0;\n vertical-align: top;\n border-inline-start-color: var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));\n }\n\n /* Variant styles */\n .divider--solid {\n --nuraly-divider-variant-style: solid;\n }\n\n .divider--dashed {\n --nuraly-divider-variant-style: dashed;\n }\n\n .divider--dotted {\n --nuraly-divider-variant-style: dotted;\n }\n\n /* Size variations (horizontal only) */\n .divider--horizontal.divider--small {\n margin: var(--nuraly-divider-margin-vertical-small) 0;\n }\n\n .divider--horizontal.divider--middle {\n margin: var(--nuraly-divider-margin-vertical-middle) 0;\n }\n\n .divider--horizontal.divider--large {\n margin: var(--nuraly-divider-margin-vertical-large) 0;\n }\n`;"]}
|
package/divider.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"divider.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"divider.types.js","sourceRoot":"","sources":["../../../../src/components/divider/divider.types.ts"],"names":[],"mappings":"AAAA;;;GAGG","sourcesContent":["/**\n * Divider Component Types\n * Based on Ant Design Divider API\n */\n\n/**\n * Direction type of the divider\n */\nexport const enum DividerType {\n Horizontal = 'horizontal',\n Vertical = 'vertical'\n}\n\n/**\n * Position of title inside horizontal divider\n */\nexport const enum DividerOrientation {\n Start = 'start',\n Center = 'center',\n End = 'end'\n}\n\n/**\n * Line style variant of the divider\n */\nexport const enum DividerVariant {\n Solid = 'solid',\n Dashed = 'dashed',\n Dotted = 'dotted'\n}\n\n/**\n * Size of the divider (only for horizontal)\n */\nexport const enum DividerSize {\n Small = 'small',\n Middle = 'middle',\n Large = 'large'\n}\n\n/**\n * Configuration interface for Divider component\n */\nexport interface DividerConfig {\n /** The direction type of divider */\n type?: DividerType;\n /** Whether line is dashed (deprecated, use variant instead) */\n dashed?: boolean;\n /** Line style variant */\n variant?: DividerVariant;\n /** Position of title inside divider */\n orientation?: DividerOrientation;\n /** Margin between title and closest border */\n orientationMargin?: string | number;\n /** Divider text show as plain style */\n plain?: boolean;\n /** Size of divider (only for horizontal) */\n size?: DividerSize;\n}\n"]}
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/divider/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './divider.component.js';\nexport * from './divider.types.js';\n"]}
|
package/package.json
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/divider/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;IACvC,OAAO,EAAE,YAAY;IACrB,YAAY,EAAE,gBAAgB;IAC9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrDividerElement } from './divider.component.js';\nexport const NrDivider = createComponent({\n tagName: 'nr-divider',\n elementClass: NrDividerElement,\n react: React,\n events: {},\n});\n"]}
|