@govtechsg/sgds-web-component 2.0.1 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/accordion/index.cjs.js

@@ -1,10 +1,11 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@lit-labs/react');
-var sgdsAccordion = require('../../components/Accordion/sgds-accordion.cjs.js');
+var sgdsAccordion = require('../components/Accordion/sgds-accordion.cjs.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/react/accordion/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/accordion/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Accordion/sgds-accordion\";\n\ncustomElements.define(\"sgds-accordion\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-accordion\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAEA,2BAAS,CAAC,CAAC;AAEnD,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,YAAY,EAAEF,2BAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/accordion/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Accordion/sgds-accordion\";\n\ncustomElements.define(\"sgds-accordion\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-accordion\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAEA,2BAAS,CAAC,CAAC;AAEnD,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,YAAY,EAAEF,2BAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/accordion/index.js

@@ -1,6 +1,7 @@
+'use client';
 import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
-import { SgdsAccordion } from '../../components/Accordion/sgds-accordion.js';
+import { SgdsAccordion } from '../components/Accordion/sgds-accordion.js';
 
 customElements.define("sgds-accordion", SgdsAccordion);
 var index = createComponent({

package/react/accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/accordion/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Accordion/sgds-accordion\";\n\ncustomElements.define(\"sgds-accordion\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-accordion\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component"],"mappings":";;;;AAIA,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAEA,aAAS,CAAC,CAAC;AAEnD,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,YAAY,EAAEA,aAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/accordion/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Accordion/sgds-accordion\";\n\ncustomElements.define(\"sgds-accordion\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-accordion\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component"],"mappings":";;;;;AAIA,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAEA,aAAS,CAAC,CAAC;AAEnD,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,YAAY,EAAEA,aAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/accordion-item/index.cjs.js

@@ -1,10 +1,11 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@lit-labs/react');
-var sgdsAccordionItem = require('../../components/Accordion/sgds-accordion-item.cjs.js');
+var sgdsAccordionItem = require('../components/Accordion/sgds-accordion-item.cjs.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/react/accordion-item/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/accordion-item/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Accordion/sgds-accordion-item\";\n\ncustomElements.define(\"sgds-accordion-item\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-accordion-item\",\n  elementClass: Component,\n  events: {\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAEA,mCAAS,CAAC,CAAC;AAExD,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,qBAAqB;AAC9B,IAAA,YAAY,EAAEF,mCAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/accordion-item/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Accordion/sgds-accordion-item\";\n\ncustomElements.define(\"sgds-accordion-item\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-accordion-item\",\n  elementClass: Component,\n  events: {\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAEA,mCAAS,CAAC,CAAC;AAExD,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,qBAAqB;AAC9B,IAAA,YAAY,EAAEF,mCAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/accordion-item/index.js

@@ -1,6 +1,7 @@
+'use client';
 import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
-import { SgdsAccordionItem } from '../../components/Accordion/sgds-accordion-item.js';
+import { SgdsAccordionItem } from '../components/Accordion/sgds-accordion-item.js';
 
 customElements.define("sgds-accordion-item", SgdsAccordionItem);
 var index = createComponent({

package/react/accordion-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/accordion-item/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Accordion/sgds-accordion-item\";\n\ncustomElements.define(\"sgds-accordion-item\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-accordion-item\",\n  elementClass: Component,\n  events: {\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;AAIA,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAEA,iBAAS,CAAC,CAAC;AAExD,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,qBAAqB;AAC9B,IAAA,YAAY,EAAEA,iBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/accordion-item/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Accordion/sgds-accordion-item\";\n\ncustomElements.define(\"sgds-accordion-item\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-accordion-item\",\n  elementClass: Component,\n  events: {\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;AAIA,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAEA,iBAAS,CAAC,CAAC;AAExD,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,qBAAqB;AAC9B,IAAA,YAAY,EAAEA,iBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/action-card/index.cjs.js

@@ -1,10 +1,11 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@lit-labs/react');
-var sgdsActionCard = require('../../components/ActionCard/sgds-action-card.cjs.js');
+var sgdsActionCard = require('../components/ActionCard/sgds-action-card.cjs.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/react/action-card/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/action-card/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/ActionCard/sgds-action-card\";\n\ncustomElements.define(\"sgds-action-card\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-action-card\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\"\n  }\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAEA,6BAAS,CAAC,CAAC;AAErD,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAEF,6BAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC5B,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/action-card/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/ActionCard/sgds-action-card\";\n\ncustomElements.define(\"sgds-action-card\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-action-card\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\"\n  }\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAEA,6BAAS,CAAC,CAAC;AAErD,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAEF,6BAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC5B,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/action-card/index.js

@@ -1,6 +1,7 @@
+'use client';
 import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
-import { SgdsActionCard } from '../../components/ActionCard/sgds-action-card.js';
+import { SgdsActionCard } from '../components/ActionCard/sgds-action-card.js';
 
 customElements.define("sgds-action-card", SgdsActionCard);
 var index = createComponent({

package/react/action-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/action-card/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/ActionCard/sgds-action-card\";\n\ncustomElements.define(\"sgds-action-card\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-action-card\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;AAIA,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAEA,cAAS,CAAC,CAAC;AAErD,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAEA,cAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC5B,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/action-card/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/ActionCard/sgds-action-card\";\n\ncustomElements.define(\"sgds-action-card\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-action-card\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;AAIA,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAEA,cAAS,CAAC,CAAC;AAErD,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAEA,cAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC5B,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/alert/index.cjs.js

@@ -1,10 +1,11 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@lit-labs/react');
-var sgdsAlert = require('../../components/Alert/sgds-alert.cjs.js');
+var sgdsAlert = require('../components/Alert/sgds-alert.cjs.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/react/alert/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/alert/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Alert/sgds-alert\";\n\ncustomElements.define(\"sgds-alert\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-alert\",\n  elementClass: Component,\n  events: {\n    onSgdsShow: \"sgds-show\",\n    onSgdsHide: \"sgds-hide\"\n  }\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,YAAY,EAAEA,mBAAS,CAAC,CAAC;AAE/C,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEF,mBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/alert/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Alert/sgds-alert\";\n\ncustomElements.define(\"sgds-alert\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-alert\",\n  elementClass: Component,\n  events: {\n    onSgdsShow: \"sgds-show\",\n    onSgdsHide: \"sgds-hide\"\n  }\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,YAAY,EAAEA,mBAAS,CAAC,CAAC;AAE/C,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEF,mBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/alert/index.js

@@ -1,6 +1,7 @@
+'use client';
 import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
-import { SgdsAlert } from '../../components/Alert/sgds-alert.js';
+import { SgdsAlert } from '../components/Alert/sgds-alert.js';
 
 customElements.define("sgds-alert", SgdsAlert);
 var index = createComponent({

package/react/alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/alert/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Alert/sgds-alert\";\n\ncustomElements.define(\"sgds-alert\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-alert\",\n  elementClass: Component,\n  events: {\n    onSgdsShow: \"sgds-show\",\n    onSgdsHide: \"sgds-hide\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;AAIA,cAAc,CAAC,MAAM,CAAC,YAAY,EAAEA,SAAS,CAAC,CAAC;AAE/C,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEA,SAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/alert/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Alert/sgds-alert\";\n\ncustomElements.define(\"sgds-alert\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-alert\",\n  elementClass: Component,\n  events: {\n    onSgdsShow: \"sgds-show\",\n    onSgdsHide: \"sgds-hide\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;AAIA,cAAc,CAAC,MAAM,CAAC,YAAY,EAAEA,SAAS,CAAC,CAAC;AAE/C,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEA,SAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/alert-heading/index.cjs.js

@@ -1,10 +1,11 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@lit-labs/react');
-var sgdsAlertHeading = require('../../components/Alert/sgds-alert-heading.cjs.js');
+var sgdsAlertHeading = require('../components/Alert/sgds-alert-heading.cjs.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/react/alert-heading/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/alert-heading/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Alert/sgds-alert-heading\";\n\ncustomElements.define(\"sgds-alert-heading\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-alert-heading\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAEA,iCAAS,CAAC,CAAC;AAEvD,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,YAAY,EAAEF,iCAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/alert-heading/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Alert/sgds-alert-heading\";\n\ncustomElements.define(\"sgds-alert-heading\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-alert-heading\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAEA,iCAAS,CAAC,CAAC;AAEvD,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,YAAY,EAAEF,iCAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/alert-heading/index.js

@@ -1,6 +1,7 @@
+'use client';
 import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
-import { SgdsAlertHeading } from '../../components/Alert/sgds-alert-heading.js';
+import { SgdsAlertHeading } from '../components/Alert/sgds-alert-heading.js';
 
 customElements.define("sgds-alert-heading", SgdsAlertHeading);
 var index = createComponent({

package/react/alert-heading/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/alert-heading/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Alert/sgds-alert-heading\";\n\ncustomElements.define(\"sgds-alert-heading\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-alert-heading\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component"],"mappings":";;;;AAIA,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAEA,gBAAS,CAAC,CAAC;AAEvD,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,YAAY,EAAEA,gBAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/alert-heading/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Alert/sgds-alert-heading\";\n\ncustomElements.define(\"sgds-alert-heading\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-alert-heading\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component"],"mappings":";;;;;AAIA,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAEA,gBAAS,CAAC,CAAC;AAEvD,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,YAAY,EAAEA,gBAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/alert-link/index.cjs.js

@@ -1,10 +1,11 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@lit-labs/react');
-var sgdsAlertLink = require('../../components/Alert/sgds-alert-link.cjs.js');
+var sgdsAlertLink = require('../components/Alert/sgds-alert-link.cjs.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/react/alert-link/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/alert-link/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Alert/sgds-alert-link\";\n\ncustomElements.define(\"sgds-alert-link\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-alert-link\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAEA,2BAAS,CAAC,CAAC;AAEpD,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAEF,2BAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/alert-link/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Alert/sgds-alert-link\";\n\ncustomElements.define(\"sgds-alert-link\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-alert-link\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAEA,2BAAS,CAAC,CAAC;AAEpD,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAEF,2BAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/alert-link/index.js

@@ -1,6 +1,7 @@
+'use client';
 import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
-import { SgdsAlertLink } from '../../components/Alert/sgds-alert-link.js';
+import { SgdsAlertLink } from '../components/Alert/sgds-alert-link.js';
 
 customElements.define("sgds-alert-link", SgdsAlertLink);
 var index = createComponent({

package/react/alert-link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/alert-link/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Alert/sgds-alert-link\";\n\ncustomElements.define(\"sgds-alert-link\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-alert-link\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component"],"mappings":";;;;AAIA,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAEA,aAAS,CAAC,CAAC;AAEpD,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAEA,aAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/alert-link/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Alert/sgds-alert-link\";\n\ncustomElements.define(\"sgds-alert-link\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-alert-link\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component"],"mappings":";;;;;AAIA,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAEA,aAAS,CAAC,CAAC;AAEpD,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAEA,aAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/badge/index.cjs.js

@@ -1,10 +1,11 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var react = require('@lit-labs/react');
-var sgdsBadge = require('../../components/Badge/sgds-badge.cjs.js');
+var sgdsBadge = require('../components/Badge/sgds-badge.cjs.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/react/badge/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/badge/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Badge/sgds-badge\";\n\ncustomElements.define(\"sgds-badge\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-badge\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,YAAY,EAAEA,mBAAS,CAAC,CAAC;AAE/C,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEF,mBAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/badge/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Badge/sgds-badge\";\n\ncustomElements.define(\"sgds-badge\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-badge\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,YAAY,EAAEA,mBAAS,CAAC,CAAC;AAE/C,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEF,mBAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/badge/index.js

@@ -1,6 +1,7 @@
+'use client';
 import * as React from 'react';
 import { createComponent } from '@lit-labs/react';
-import { SgdsBadge } from '../../components/Badge/sgds-badge.js';
+import { SgdsBadge } from '../components/Badge/sgds-badge.js';
 
 customElements.define("sgds-badge", SgdsBadge);
 var index = createComponent({

package/react/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/badge/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Badge/sgds-badge\";\n\ncustomElements.define(\"sgds-badge\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-badge\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component"],"mappings":";;;;AAIA,cAAc,CAAC,MAAM,CAAC,YAAY,EAAEA,SAAS,CAAC,CAAC;AAE/C,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEA,SAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/badge/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Badge/sgds-badge\";\n\ncustomElements.define(\"sgds-badge\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-badge\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component"],"mappings":";;;;;AAIA,cAAc,CAAC,MAAM,CAAC,YAAY,EAAEA,SAAS,CAAC,CAAC;AAE/C,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEA,SAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/{base → react/base}/card-element.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/react/base/card-element.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-element.cjs.js","sources":["../../../src/base/card-element.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport cardStyle from \"./card.css\";\nimport textStyles from \"../styles/text-variants.css\";\nimport bgStyles from \"../styles/bg-variants.css\";\nimport borderStyles from \"../styles/border-variants.css\";\nimport headerStyles from \"../styles/header-class.css\";\nimport paragraphStyles from \"../styles/paragraph.css\";\n\nimport SgdsElement from \"./sgds-element\";\nexport type CardBorderVariant = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"dark\" | \"light\";\n\nexport class CardElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, bgStyles, borderStyles, headerStyles, paragraphStyles, cardStyle];\n\n  /** The border's variant. */\n  @property()\n  borderColor: CardBorderVariant;\n\n  /** The bg's variant. */\n  @property() bgColor: CardBorderVariant;\n\n  /** The text's variant. */\n  @property() textColor: CardTextVariant;\n}\n\nexport type CardTextVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"dark\"\n  | \"light\"\n  | \"white\"\n  | \"muted\";\n"],"names":["SgdsElement","textStyles","bgStyles","borderStyles","headerStyles","paragraphStyles","cardStyle","__decorate","property"],"mappings":";;;;;;;;;;;;;;;AAWM,MAAO,WAAY,SAAQA,sBAAW,CAAA;;AACnC,WAAA,CAAA,MAAM,GAAG,CAAC,GAAGA,sBAAW,CAAC,MAAM,EAAEC,uBAAU,EAAEC,qBAAQ,EAAEC,yBAAY,EAAEC,sBAAY,EAAEC,oBAAe,EAAEC,eAAS,CAAC,CAAC;AAItHC,gBAAA,CAAA;AADC,IAAAC,sBAAQ,EAAE;AACoB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGnBD,gBAAA,CAAA;AAAX,IAAAC,sBAAQ,EAAE;AAA4B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG3BD,gBAAA,CAAA;AAAX,IAAAC,sBAAQ,EAAE;AAA4B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/base/card-element.js

@@ -0,0 +1,26 @@
+'use client';
+import { __decorate } from 'tslib';
+import { property } from 'lit/decorators.js';
+import css_248z$5 from './card.js';
+import css_248z from '../styles/text-variants.js';
+import css_248z$1 from '../styles/bg-variants.js';
+import css_248z$2 from '../styles/border-variants.js';
+import css_248z$3 from '../styles/header-class.js';
+import css_248z$4 from '../styles/paragraph.js';
+import SgdsElement from './sgds-element.js';
+
+class CardElement extends SgdsElement {
+}
+CardElement.styles = [...SgdsElement.styles, css_248z, css_248z$1, css_248z$2, css_248z$3, css_248z$4, css_248z$5];
+__decorate([
+    property()
+], CardElement.prototype, "borderColor", void 0);
+__decorate([
+    property()
+], CardElement.prototype, "bgColor", void 0);
+__decorate([
+    property()
+], CardElement.prototype, "textColor", void 0);
+
+export { CardElement };
+//# sourceMappingURL=card-element.js.map

package/react/base/card-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-element.js","sources":["../../../src/base/card-element.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport cardStyle from \"./card.css\";\nimport textStyles from \"../styles/text-variants.css\";\nimport bgStyles from \"../styles/bg-variants.css\";\nimport borderStyles from \"../styles/border-variants.css\";\nimport headerStyles from \"../styles/header-class.css\";\nimport paragraphStyles from \"../styles/paragraph.css\";\n\nimport SgdsElement from \"./sgds-element\";\nexport type CardBorderVariant = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"dark\" | \"light\";\n\nexport class CardElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, bgStyles, borderStyles, headerStyles, paragraphStyles, cardStyle];\n\n  /** The border's variant. */\n  @property()\n  borderColor: CardBorderVariant;\n\n  /** The bg's variant. */\n  @property() bgColor: CardBorderVariant;\n\n  /** The text's variant. */\n  @property() textColor: CardTextVariant;\n}\n\nexport type CardTextVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"dark\"\n  | \"light\"\n  | \"white\"\n  | \"muted\";\n"],"names":["textStyles","bgStyles","borderStyles","headerStyles","paragraphStyles","cardStyle"],"mappings":";;;;;;;;;;;AAWM,MAAO,WAAY,SAAQ,WAAW,CAAA;;AACnC,WAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,EAAEC,UAAQ,EAAEC,UAAY,EAAEC,UAAY,EAAEC,UAAe,EAAEC,UAAS,CAAC,CAAC;AAItH,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACoB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGnB,UAAA,CAAA;AAAX,IAAA,QAAQ,EAAE;AAA4B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG3B,UAAA,CAAA;AAAX,IAAA,QAAQ,EAAE;AAA4B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/{base → react/base}/card.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components/Card → react/base}/card.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"card.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/base/card.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-body-bg);border:var(--sgds-border-width) solid var(--sgds-border-color-translucent);border-radius:var(--sgds-border-radius);box-shadow:none;display:flex;flex-direction:column;height:auto;min-width:0;position:relative}.card,.card-body{color:var(--sgds-body-color)}.card-body{flex:1 1 auto;padding:var(--sgds-spacer-4)}.card-title{color:var(--sgds-body-color);margin-bottom:var(--sgds-spacer-2)}.card-subtitle,.card-text:last-child{margin-bottom:0}slot[name=card-image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius) - var(--sgds-border-width));border-top-right-radius:calc(var(--sgds-border-radius) - var(--sgds-border-width))}slot[name=card-link]::slotted(*){font-weight:700}`;
+
+export { css_248z as default };
+//# sourceMappingURL=card.js.map

package/react/base/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/{base → react/base}/dropdown-element.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/react/base/dropdown-element.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-element.cjs.js","sources":["../../../src/base/dropdown-element.ts"],"sourcesContent":["import type { StrictModifiers } from \"@popperjs/core\";\nimport * as Popper from \"@popperjs/core\";\nimport Dropdown from \"bootstrap/js/src/dropdown\";\nimport type { Dropdown as BsDropdown } from \"bootstrap\";\nimport { property, state } from \"lit/decorators.js\";\nimport { Ref, createRef } from \"lit/directives/ref.js\";\nimport mergeDeep from \"../utils/mergeDeep\";\nimport SgdsElement from \"./sgds-element\";\nimport generateId from \"../utils/generateId\";\n\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ESC = \"Escape\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @event sgds-show - Emitted event when show instance is called\n * @event sgds-after-show - Emitted event when dropdown has been made visible to the user and CSS transitions have completed\n * @event sgds-hide - Emitted event when hide instance is called\n * @event sgds-after-hide - Emitted event when dropdown has hidden to the user and CSS transitions have completed\n */\n\nexport class DropdownElement extends SgdsElement {\n  // static styles = SgdsElement.styles;\n\n  /** @internal */\n  protected myDropdown: Ref<HTMLElement> = createRef();\n  /** @internal */\n  protected bsDropdown: BsDropdown = null;\n\n  /** @internal Unique id generated for the dropdown menu */\n  protected dropdownMenuId: string = generateId(\"dropdown-menu\", \"div\");\n\n  /** @internal Controls auto-flipping of menu */\n  @property({ type: Boolean, state: true })\n  protected noFlip = false;\n\n  /** @internal When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: true })\n  protected menuAlignRight = false;\n\n  /** @internal The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: true })\n  protected drop: DropDirection = \"down\";\n\n  /**  Additional configuration to pass to Popper.js. See https://popper.js.org/ for config opts */\n  @property({ type: Object })\n  popperOpts = {};\n\n  /** @internal */\n  @state()\n  dropdownConfig: Partial<Popper.Options>;\n  /** @internal */\n  @state()\n  protected modifierOpt: StrictModifiers[] = [];\n\n  /** When true, dropdown menu shows on first load */\n  @property({ type: Boolean, reflect: true })\n  menuIsOpen = false;\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  @property({ type: String })\n  close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  /** Disables the dropdown toggle */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.close !== \"inside\") {\n      document.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this));\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    document.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this));\n  }\n\n  firstUpdated() {\n    this.bsDropdown = new Dropdown(this.myDropdown.value, {\n      // autoClose not working as bootstrap is using attribute data-bs-toggle=\"dropdown\" to configure autoclose. But it doesnt look into this attribute in the shadow dom\n      reference: \"toggle\", // working\n      popperConfig: (defaultConfig?: Partial<Popper.Options>) => {\n        //working\n        this.dropdownConfig = {\n          placement: \"bottom-start\",\n          modifiers: !this.noFlip\n            ? this.modifierOpt\n            : [\n                ...this.modifierOpt,\n                {\n                  name: \"flip\",\n                  options: { fallbackPlacements: [] }\n                }\n              ]\n        };\n\n        switch (this.drop) {\n          case \"up\":\n            this.dropdownConfig.placement = this.menuAlignRight ? \"top-end\" : \"top-start\";\n            break;\n          case \"right\":\n            this.dropdownConfig.placement = \"right-start\";\n            break;\n          case \"left\":\n            this.dropdownConfig.placement = \"left-start\";\n            break;\n          case \"down\":\n            this.dropdownConfig.placement = this.menuAlignRight ? \"bottom-end\" : \"bottom-start\";\n            break;\n          default:\n            this.dropdownConfig.placement = undefined;\n            break;\n        }\n        return mergeDeep(defaultConfig, mergeDeep(this.dropdownConfig, this.popperOpts));\n      }\n    });\n\n    this.myDropdown.value.addEventListener(\"show.bs.dropdown\", () => {\n      this.menuIsOpen = true;\n      this.emit(\"sgds-show\");\n    });\n\n    this.myDropdown.value.addEventListener(\"shown.bs.dropdown\", () => {\n      this.menuIsOpen = true;\n      this.emit(\"sgds-after-show\");\n    });\n\n    this.myDropdown.value.addEventListener(\"hide.bs.dropdown\", () => {\n      this.menuIsOpen = false;\n      this.emit(\"sgds-hide\");\n    });\n\n    this.myDropdown.value.addEventListener(\"hidden.bs.dropdown\", () => {\n      this.menuIsOpen = false;\n      this.emit(\"sgds-after-hide\");\n    });\n\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuEvent);\n  }\n\n  /** When invoked, opens the dropdown menu */\n  public showMenu() {\n    this.bsDropdown.show();\n  }\n\n  /** When invoked, hides the dropdown menu */\n  public hideMenu() {\n    this.bsDropdown.hide();\n  }\n\n  toggleMenu() {\n    this.bsDropdown.toggle();\n  }\n\n  private _handleKeyboardMenuEvent(e: KeyboardEvent) {\n    switch (e.key) {\n      case ARROW_DOWN:\n        e.preventDefault();\n        if (!this.menuIsOpen) return this.showMenu();\n        break;\n      case ARROW_UP:\n        e.preventDefault();\n        if (!this.menuIsOpen) return this.showMenu();\n        break;\n      case ESC:\n        return this.hideMenu();\n      default:\n        break;\n    }\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: DropdownElement) {\n    if (!e.composedPath().includes(self)) {\n      this.hideMenu();\n    }\n  }\n}\n"],"names":["SgdsElement","createRef","generateId","Dropdown","mergeDeep","__decorate","property","state"],"mappings":"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"}

package/react/base/dropdown-element.js

@@ -0,0 +1,174 @@
+'use client';
+import { __decorate } from 'tslib';
+import Dropdown from 'bootstrap/js/src/dropdown';
+import { property, state } from 'lit/decorators.js';
+import { createRef } from 'lit/directives/ref.js';
+import mergeDeep from '../utils/mergeDeep.js';
+import SgdsElement from './sgds-element.js';
+import genId from '../utils/generateId.js';
+
+const ARROW_DOWN = "ArrowDown";
+const ARROW_UP = "ArrowUp";
+const ESC = "Escape";
+/**
+ * @event sgds-show - Emitted event when show instance is called
+ * @event sgds-after-show - Emitted event when dropdown has been made visible to the user and CSS transitions have completed
+ * @event sgds-hide - Emitted event when hide instance is called
+ * @event sgds-after-hide - Emitted event when dropdown has hidden to the user and CSS transitions have completed
+ */
+class DropdownElement extends SgdsElement {
+    constructor() {
+        // static styles = SgdsElement.styles;
+        super(...arguments);
+        /** @internal */
+        this.myDropdown = createRef();
+        /** @internal */
+        this.bsDropdown = null;
+        /** @internal Unique id generated for the dropdown menu */
+        this.dropdownMenuId = genId("dropdown-menu", "div");
+        /** @internal Controls auto-flipping of menu */
+        this.noFlip = false;
+        /** @internal When true, aligns right edge of menu with right edge of button */
+        this.menuAlignRight = false;
+        /** @internal The drop position of menu relative to the toggle button */
+        this.drop = "down";
+        /**  Additional configuration to pass to Popper.js. See https://popper.js.org/ for config opts */
+        this.popperOpts = {};
+        /** @internal */
+        this.modifierOpt = [];
+        /** When true, dropdown menu shows on first load */
+        this.menuIsOpen = false;
+        /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */
+        this.close = "default";
+        /** Disables the dropdown toggle */
+        this.disabled = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.close !== "inside") {
+            document.addEventListener("click", (event) => this._handleClickOutOfElement(event, this));
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this));
+    }
+    firstUpdated() {
+        this.bsDropdown = new Dropdown(this.myDropdown.value, {
+            // autoClose not working as bootstrap is using attribute data-bs-toggle="dropdown" to configure autoclose. But it doesnt look into this attribute in the shadow dom
+            reference: "toggle", // working
+            popperConfig: (defaultConfig) => {
+                //working
+                this.dropdownConfig = {
+                    placement: "bottom-start",
+                    modifiers: !this.noFlip
+                        ? this.modifierOpt
+                        : [
+                            ...this.modifierOpt,
+                            {
+                                name: "flip",
+                                options: { fallbackPlacements: [] }
+                            }
+                        ]
+                };
+                switch (this.drop) {
+                    case "up":
+                        this.dropdownConfig.placement = this.menuAlignRight ? "top-end" : "top-start";
+                        break;
+                    case "right":
+                        this.dropdownConfig.placement = "right-start";
+                        break;
+                    case "left":
+                        this.dropdownConfig.placement = "left-start";
+                        break;
+                    case "down":
+                        this.dropdownConfig.placement = this.menuAlignRight ? "bottom-end" : "bottom-start";
+                        break;
+                    default:
+                        this.dropdownConfig.placement = undefined;
+                        break;
+                }
+                return mergeDeep(defaultConfig, mergeDeep(this.dropdownConfig, this.popperOpts));
+            }
+        });
+        this.myDropdown.value.addEventListener("show.bs.dropdown", () => {
+            this.menuIsOpen = true;
+            this.emit("sgds-show");
+        });
+        this.myDropdown.value.addEventListener("shown.bs.dropdown", () => {
+            this.menuIsOpen = true;
+            this.emit("sgds-after-show");
+        });
+        this.myDropdown.value.addEventListener("hide.bs.dropdown", () => {
+            this.menuIsOpen = false;
+            this.emit("sgds-hide");
+        });
+        this.myDropdown.value.addEventListener("hidden.bs.dropdown", () => {
+            this.menuIsOpen = false;
+            this.emit("sgds-after-hide");
+        });
+        this.addEventListener("keydown", this._handleKeyboardMenuEvent);
+    }
+    /** When invoked, opens the dropdown menu */
+    showMenu() {
+        this.bsDropdown.show();
+    }
+    /** When invoked, hides the dropdown menu */
+    hideMenu() {
+        this.bsDropdown.hide();
+    }
+    toggleMenu() {
+        this.bsDropdown.toggle();
+    }
+    _handleKeyboardMenuEvent(e) {
+        switch (e.key) {
+            case ARROW_DOWN:
+                e.preventDefault();
+                if (!this.menuIsOpen)
+                    return this.showMenu();
+                break;
+            case ARROW_UP:
+                e.preventDefault();
+                if (!this.menuIsOpen)
+                    return this.showMenu();
+                break;
+            case ESC:
+                return this.hideMenu();
+        }
+    }
+    _handleClickOutOfElement(e, self) {
+        if (!e.composedPath().includes(self)) {
+            this.hideMenu();
+        }
+    }
+}
+__decorate([
+    property({ type: Boolean, state: true })
+], DropdownElement.prototype, "noFlip", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, state: true })
+], DropdownElement.prototype, "menuAlignRight", void 0);
+__decorate([
+    property({ type: String, reflect: true, state: true })
+], DropdownElement.prototype, "drop", void 0);
+__decorate([
+    property({ type: Object })
+], DropdownElement.prototype, "popperOpts", void 0);
+__decorate([
+    state()
+], DropdownElement.prototype, "dropdownConfig", void 0);
+__decorate([
+    state()
+], DropdownElement.prototype, "modifierOpt", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DropdownElement.prototype, "menuIsOpen", void 0);
+__decorate([
+    property({ type: String })
+], DropdownElement.prototype, "close", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DropdownElement.prototype, "disabled", void 0);
+
+export { DropdownElement };
+//# sourceMappingURL=dropdown-element.js.map

package/react/base/dropdown-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-element.js","sources":["../../../src/base/dropdown-element.ts"],"sourcesContent":["import type { StrictModifiers } from \"@popperjs/core\";\nimport * as Popper from \"@popperjs/core\";\nimport Dropdown from \"bootstrap/js/src/dropdown\";\nimport type { Dropdown as BsDropdown } from \"bootstrap\";\nimport { property, state } from \"lit/decorators.js\";\nimport { Ref, createRef } from \"lit/directives/ref.js\";\nimport mergeDeep from \"../utils/mergeDeep\";\nimport SgdsElement from \"./sgds-element\";\nimport generateId from \"../utils/generateId\";\n\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ESC = \"Escape\";\n\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\n\n/**\n * @event sgds-show - Emitted event when show instance is called\n * @event sgds-after-show - Emitted event when dropdown has been made visible to the user and CSS transitions have completed\n * @event sgds-hide - Emitted event when hide instance is called\n * @event sgds-after-hide - Emitted event when dropdown has hidden to the user and CSS transitions have completed\n */\n\nexport class DropdownElement extends SgdsElement {\n  // static styles = SgdsElement.styles;\n\n  /** @internal */\n  protected myDropdown: Ref<HTMLElement> = createRef();\n  /** @internal */\n  protected bsDropdown: BsDropdown = null;\n\n  /** @internal Unique id generated for the dropdown menu */\n  protected dropdownMenuId: string = generateId(\"dropdown-menu\", \"div\");\n\n  /** @internal Controls auto-flipping of menu */\n  @property({ type: Boolean, state: true })\n  protected noFlip = false;\n\n  /** @internal When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: true })\n  protected menuAlignRight = false;\n\n  /** @internal The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: true })\n  protected drop: DropDirection = \"down\";\n\n  /**  Additional configuration to pass to Popper.js. See https://popper.js.org/ for config opts */\n  @property({ type: Object })\n  popperOpts = {};\n\n  /** @internal */\n  @state()\n  dropdownConfig: Partial<Popper.Options>;\n  /** @internal */\n  @state()\n  protected modifierOpt: StrictModifiers[] = [];\n\n  /** When true, dropdown menu shows on first load */\n  @property({ type: Boolean, reflect: true })\n  menuIsOpen = false;\n\n  /** Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked */\n  @property({ type: String })\n  close: \"outside\" | \"default\" | \"inside\" = \"default\";\n\n  /** Disables the dropdown toggle */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.close !== \"inside\") {\n      document.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this));\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    document.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this));\n  }\n\n  firstUpdated() {\n    this.bsDropdown = new Dropdown(this.myDropdown.value, {\n      // autoClose not working as bootstrap is using attribute data-bs-toggle=\"dropdown\" to configure autoclose. But it doesnt look into this attribute in the shadow dom\n      reference: \"toggle\", // working\n      popperConfig: (defaultConfig?: Partial<Popper.Options>) => {\n        //working\n        this.dropdownConfig = {\n          placement: \"bottom-start\",\n          modifiers: !this.noFlip\n            ? this.modifierOpt\n            : [\n                ...this.modifierOpt,\n                {\n                  name: \"flip\",\n                  options: { fallbackPlacements: [] }\n                }\n              ]\n        };\n\n        switch (this.drop) {\n          case \"up\":\n            this.dropdownConfig.placement = this.menuAlignRight ? \"top-end\" : \"top-start\";\n            break;\n          case \"right\":\n            this.dropdownConfig.placement = \"right-start\";\n            break;\n          case \"left\":\n            this.dropdownConfig.placement = \"left-start\";\n            break;\n          case \"down\":\n            this.dropdownConfig.placement = this.menuAlignRight ? \"bottom-end\" : \"bottom-start\";\n            break;\n          default:\n            this.dropdownConfig.placement = undefined;\n            break;\n        }\n        return mergeDeep(defaultConfig, mergeDeep(this.dropdownConfig, this.popperOpts));\n      }\n    });\n\n    this.myDropdown.value.addEventListener(\"show.bs.dropdown\", () => {\n      this.menuIsOpen = true;\n      this.emit(\"sgds-show\");\n    });\n\n    this.myDropdown.value.addEventListener(\"shown.bs.dropdown\", () => {\n      this.menuIsOpen = true;\n      this.emit(\"sgds-after-show\");\n    });\n\n    this.myDropdown.value.addEventListener(\"hide.bs.dropdown\", () => {\n      this.menuIsOpen = false;\n      this.emit(\"sgds-hide\");\n    });\n\n    this.myDropdown.value.addEventListener(\"hidden.bs.dropdown\", () => {\n      this.menuIsOpen = false;\n      this.emit(\"sgds-after-hide\");\n    });\n\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuEvent);\n  }\n\n  /** When invoked, opens the dropdown menu */\n  public showMenu() {\n    this.bsDropdown.show();\n  }\n\n  /** When invoked, hides the dropdown menu */\n  public hideMenu() {\n    this.bsDropdown.hide();\n  }\n\n  toggleMenu() {\n    this.bsDropdown.toggle();\n  }\n\n  private _handleKeyboardMenuEvent(e: KeyboardEvent) {\n    switch (e.key) {\n      case ARROW_DOWN:\n        e.preventDefault();\n        if (!this.menuIsOpen) return this.showMenu();\n        break;\n      case ARROW_UP:\n        e.preventDefault();\n        if (!this.menuIsOpen) return this.showMenu();\n        break;\n      case ESC:\n        return this.hideMenu();\n      default:\n        break;\n    }\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: DropdownElement) {\n    if (!e.composedPath().includes(self)) {\n      this.hideMenu();\n    }\n  }\n}\n"],"names":["generateId"],"mappings":"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"}

package/{base → react/base}/dropdown-list-element.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });