@trendyol/baklava 2.0.0-beta.24 → 2.0.0-beta.25

package/dist/baklava-react.js

@@ -1,4 +1,4 @@
-import"./chunk-NZ3RGSR6.js";import n from"react";var v=new Set(["children","localName","ref","style","className"]),E=new WeakMap,x=(a,m,p,u,h)=>{let g=h==null?void 0:h[m];g!==void 0?p!==u&&((i,l,c)=>{let s=E.get(i);s===void 0&&E.set(i,s=new Map);let t=s.get(l);c!==void 0?t===void 0?(s.set(l,t={handleEvent:c}),i.addEventListener(l,t)):t.handleEvent=c:t!==void 0&&(s.delete(l),i.removeEventListener(l,t))})(a,g,p):a[m]=p},o=(a,m,p,u,h)=>{let g=a.Component,i=a.createElement,l=new Set(Object.keys(u!=null?u:{}));for(let t in p.prototype)t in HTMLElement.prototype||(v.has(t)?console.warn(`${m} contains property ${t} which is a React reserved property. It will be used by React and not set on the element.`):l.add(t));class c extends g{constructor(){super(...arguments),this.o=null}t(e){if(this.o!==null)for(let d in this.i)x(this.o,d,this.props[d],e?e[d]:void 0,u)}componentDidMount(){this.t()}componentDidUpdate(e){this.t(e)}render(){let e=this.props._$Gl;this.h!==void 0&&this.u===e||(this.h=r=>{this.o===null&&(this.o=r),e!==null&&((b,f)=>{typeof b=="function"?b(f):b.current=f})(e,r),this.u=e});let d={ref:this.h};this.i={};for(let[r,b]of Object.entries(this.props))r!=="__forwardedRef"&&(l.has(r)?this.i[r]=b:d[r==="className"?"class":r]=b);return i(m,d)}}c.displayName=h!=null?h:p.name;let s=a.forwardRef((t,e)=>i(c,{...t,_$Gl:e},t==null?void 0:t.children));return s.displayName=c.displayName,s};var I=o(n,"bl-badge",customElements.get("bl-badge"),{}),R=o(n,"bl-button",customElements.get("bl-button"),{onClick:"bl-click"}),T=o(n,"bl-icon",customElements.get("bl-icon"),{onLoad:"bl-load",onError:"bl-error"}),k=o(n,"bl-input",customElements.get("bl-input"),{onChange:"bl-change",onInput:"bl-input"}),L=o(n,"bl-progress-indicator",customElements.get("bl-progress-indicator"),{}),M=o(n,"bl-tab-group",customElements.get("bl-tab-group"),{}),S=o(n,"bl-tooltip",customElements.get("bl-tooltip"),{onShow:"bl-tooltip-show",onHide:"bl-tooltip-hide"}),_=o(n,"bl-tab",customElements.get("bl-tab"),{onSelected:"bl-tab-selected"}),$=o(n,"bl-tab-panel",customElements.get("bl-tab-panel"),{});export{I as BlBadge,R as BlButton,T as BlIcon,k as BlInput,L as BlProgressIndicator,_ as BlTab,M as BlTabGroup,$ as BlTabPanel,S as BlTooltip};
+import"./chunk-NZ3RGSR6.js";import n from"react";var v=new Set(["children","localName","ref","style","className"]),f=new WeakMap,x=(a,m,p,u,h)=>{let g=h==null?void 0:h[m];g!==void 0?p!==u&&((c,l,i)=>{let s=f.get(c);s===void 0&&f.set(c,s=new Map);let t=s.get(l);i!==void 0?t===void 0?(s.set(l,t={handleEvent:i}),c.addEventListener(l,t)):t.handleEvent=i:t!==void 0&&(s.delete(l),c.removeEventListener(l,t))})(a,g,p):a[m]=p},e=(a,m,p,u,h)=>{let g=a.Component,c=a.createElement,l=new Set(Object.keys(u!=null?u:{}));for(let t in p.prototype)t in HTMLElement.prototype||(v.has(t)?console.warn(`${m} contains property ${t} which is a React reserved property. It will be used by React and not set on the element.`):l.add(t));class i extends g{constructor(){super(...arguments),this.o=null}t(o){if(this.o!==null)for(let b in this.i)x(this.o,b,this.props[b],o?o[b]:void 0,u)}componentDidMount(){this.t()}componentDidUpdate(o){this.t(o)}render(){let o=this.props._$Gl;this.h!==void 0&&this.u===o||(this.h=r=>{this.o===null&&(this.o=r),o!==null&&((d,E)=>{typeof d=="function"?d(E):d.current=E})(o,r),this.u=o});let b={ref:this.h};this.i={};for(let[r,d]of Object.entries(this.props))r!=="__forwardedRef"&&(l.has(r)?this.i[r]=d:b[r==="className"?"class":r]=d);return c(m,b)}}i.displayName=h!=null?h:p.name;let s=a.forwardRef((t,o)=>c(i,{...t,_$Gl:o},t==null?void 0:t.children));return s.displayName=i.displayName,s};var I=e(n,"bl-alert",customElements.get("bl-alert"),{onClose:"bl-close"}),R=e(n,"bl-badge",customElements.get("bl-badge"),{}),T=e(n,"bl-button",customElements.get("bl-button"),{onClick:"bl-click"}),k=e(n,"bl-icon",customElements.get("bl-icon"),{onLoad:"bl-load",onError:"bl-error"}),L=e(n,"bl-input",customElements.get("bl-input"),{onChange:"bl-change",onInput:"bl-input"}),M=e(n,"bl-progress-indicator",customElements.get("bl-progress-indicator"),{}),S=e(n,"bl-tab-group",customElements.get("bl-tab-group"),{}),_=e(n,"bl-tooltip",customElements.get("bl-tooltip"),{onShow:"bl-tooltip-show",onHide:"bl-tooltip-hide"}),$=e(n,"bl-tab",customElements.get("bl-tab"),{onSelected:"bl-tab-selected"}),G=e(n,"bl-tab-panel",customElements.get("bl-tab-panel"),{});export{I as BlAlert,R as BlBadge,T as BlButton,k as BlIcon,L as BlInput,M as BlProgressIndicator,$ as BlTab,S as BlTabGroup,G as BlTabPanel,_ as BlTooltip};
 /**
  * @license
  * Copyright 2018 Google LLC

package/dist/baklava-react.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/baklava-react.ts", "../node_modules/@lit-labs/react/src/create-component.ts"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-nocheck\nimport React from 'react';\nimport { createComponent } from '@lit-labs/react';\n\nexport const BlBadge = createComponent(\n  React,\n  'bl-badge',\n  customElements.get('bl-badge'),\n  {}\n);\n\nexport const BlButton = createComponent(\n  React,\n  'bl-button',\n  customElements.get('bl-button'),\n  { onClick: 'bl-click' }\n);\n\nexport const BlIcon = createComponent(\n  React,\n  'bl-icon',\n  customElements.get('bl-icon'),\n  { onLoad: 'bl-load', onError: 'bl-error' }\n);\n\nexport const BlInput = createComponent(\n  React,\n  'bl-input',\n  customElements.get('bl-input'),\n  { onChange: 'bl-change', onInput: 'bl-input' }\n);\n\nexport const BlProgressIndicator = createComponent(\n  React,\n  'bl-progress-indicator',\n  customElements.get('bl-progress-indicator'),\n  {}\n);\n\nexport const BlTabGroup = createComponent(\n  React,\n  'bl-tab-group',\n  customElements.get('bl-tab-group'),\n  {}\n);\n\nexport const BlTooltip = createComponent(\n  React,\n  'bl-tooltip',\n  customElements.get('bl-tooltip'),\n  { onShow: 'bl-tooltip-show', onHide: 'bl-tooltip-hide' }\n);\n\nexport const BlTab = createComponent(\n  React,\n  'bl-tab',\n  customElements.get('bl-tab'),\n  { onSelected: 'bl-tab-selected' }\n);\n\nexport const BlTabPanel = createComponent(\n  React,\n  'bl-tab-panel',\n  customElements.get('bl-tab-panel'),\n  {}\n);\n", "/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nconst reservedReactProperties = new Set([\n  'children',\n  'localName',\n  'ref',\n  'style',\n  'className',\n]);\n\nconst listenedEvents: WeakMap<\n  Element,\n  Map<string, EventListenerObject>\n> = new WeakMap();\n\n/**\n * Adds an event listener for the specified event to the given node. In the\n * React setup, there should only ever be one event listener. Thus, for\n * efficiency only one listener is added and the handler for that listener is\n * updated to point to the given listener function.\n */\nconst addOrUpdateEventListener = (\n  node: Element,\n  event: string,\n  listener: (event?: Event) => void\n) => {\n  let events = listenedEvents.get(node);\n  if (events === undefined) {\n    listenedEvents.set(node, (events = new Map()));\n  }\n  let handler = events.get(event);\n  if (listener !== undefined) {\n    // If necessary, add listener and track handler\n    if (handler === undefined) {\n      events.set(event, (handler = {handleEvent: listener}));\n      node.addEventListener(event, handler);\n      // Otherwise just update the listener with new value\n    } else {\n      handler.handleEvent = listener;\n    }\n    // Remove listener if one exists and value is undefined\n  } else if (handler !== undefined) {\n    events.delete(event);\n    node.removeEventListener(event, handler);\n  }\n};\n\n/**\n * Sets properties and events on custom elements. These properties and events\n * have been pre-filtered so we know they should apply to the custom element.\n */\nconst setProperty = <E extends Element>(\n  node: E,\n  name: string,\n  value: unknown,\n  old: unknown,\n  events?: Events\n) => {\n  const event = events?.[name];\n  if (event !== undefined) {\n    // Dirty check event value.\n    if (value !== old) {\n      addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n    }\n  } else {\n    // But don't dirty check properties; elements are assumed to do this.\n    node[name as keyof E] = value as E[keyof E];\n  }\n};\n\n// Set a React ref. Note, there are 2 kinds of refs and there's no built in\n// React API to set a ref.\nconst setRef = (ref: React.Ref<unknown>, value: Element | null) => {\n  if (typeof ref === 'function') {\n    (ref as (e: Element | null) => void)(value);\n  } else {\n    (ref as {current: Element | null}).current = value;\n  }\n};\n\ntype Constructor<T> = {new (): T};\n\n/***\n * Typecast that curries an Event type through a string. The goal of the type\n * cast is to match a prop name to a typed event callback.\n */\nexport type EventName<T extends Event = Event> = string & {\n  __event_type: T;\n};\n\ntype Events = Record<string, EventName | string>;\n\ntype EventProps<R extends Events> = {\n  [K in keyof R]: R[K] extends EventName\n    ? (e: R[K]['__event_type']) => void\n    : (e: Event) => void;\n};\n\n/**\n * Creates a React component for a custom element. Properties are distinguished\n * from attributes automatically, and events can be configured so they are\n * added to the custom element as event listeners.\n *\n * @param React The React module, typically imported from the `react` npm\n * package.\n * @param tagName The custom element tag name registered via\n * `customElements.define`.\n * @param elementClass The custom element class registered via\n * `customElements.define`.\n * @param events An object listing events to which the component can listen. The\n * object keys are the event property names passed in via React props and the\n * object values are the names of the corresponding events generated by the\n * custom element. For example, given `{onactivate: 'activate'}` an event\n * function may be passed via the component's `onactivate` prop and will be\n * called when the custom element fires its `activate` event.\n * @param displayName A React component display name, used in debugging\n * messages. Default value is inferred from the name of custom element class\n * registered via `customElements.define`.\n */\nexport const createComponent = <I extends HTMLElement, E extends Events = {}>(\n  React: typeof window.React,\n  tagName: string,\n  elementClass: Constructor<I>,\n  events?: E,\n  displayName?: string\n) => {\n  const Component = React.Component;\n  const createElement = React.createElement;\n\n  // Props the user is allowed to use, includes standard attributes, children,\n  // ref, as well as special event and element properties.\n  type ReactProps = Omit<React.HTMLAttributes<I>, keyof E>;\n  type ElementWithoutPropsOrEvents = Omit<I, keyof E | keyof ReactProps>;\n  type UserProps = Partial<\n    ReactProps & ElementWithoutPropsOrEvents & EventProps<E>\n  >;\n\n  // Props used by this component wrapper. This is the UserProps and the\n  // special `__forwardedRef` property. Note, this ref is special because\n  // it's both needed in this component to get access to the rendered element\n  // and must fulfill any ref passed by the user.\n  type ComponentProps = UserProps & {\n    __forwardedRef?: React.Ref<unknown>;\n  };\n\n  // Set of properties/events which should be specially handled by the wrapper\n  // and not handled directly by React.\n  const elementClassProps = new Set(Object.keys(events ?? {}));\n  for (const p in elementClass.prototype) {\n    if (!(p in HTMLElement.prototype)) {\n      if (reservedReactProperties.has(p)) {\n        // Note, this effectively warns only for `ref` since the other\n        // reserved props are on HTMLElement.prototype. To address this\n        // would require crawling down the prototype, which doesn't feel worth\n        // it since implementing these properties on an element is extremely\n        // rare.\n        console.warn(\n          `${tagName} contains property ${p} which is a React ` +\n            `reserved property. It will be used by React and not set on ` +\n            `the element.`\n        );\n      } else {\n        elementClassProps.add(p);\n      }\n    }\n  }\n\n  class ReactComponent extends Component<ComponentProps> {\n    private _element: I | null = null;\n    private _elementProps!: {[index: string]: unknown};\n    private _userRef?: React.Ref<unknown>;\n    private _ref?: React.RefCallback<I>;\n\n    static displayName = displayName ?? elementClass.name;\n\n    private _updateElement(oldProps?: ComponentProps) {\n      if (this._element === null) {\n        return;\n      }\n      // Set element properties to the values in `this.props`\n      for (const prop in this._elementProps) {\n        setProperty(\n          this._element,\n          prop,\n          this.props[prop as keyof ComponentProps],\n          oldProps ? oldProps[prop as keyof ComponentProps] : undefined,\n          events\n        );\n      }\n      // Note, the spirit of React might be to \"unset\" any old values that\n      // are no longer included; however, there's no reasonable value to set\n      // them to so we just leave the previous state as is.\n    }\n\n    /**\n     * Updates element properties correctly setting properties\n     * on mount.\n     */\n    override componentDidMount() {\n      this._updateElement();\n    }\n\n    /**\n     * Updates element properties correctly setting properties\n     * on every update. Note, this does not include mount.\n     */\n    override componentDidUpdate(old: ComponentProps) {\n      this._updateElement(old);\n    }\n\n    /**\n     * Renders the custom element with a `ref` prop which allows this\n     * component to reference the custom element.\n     *\n     * Standard attributes are passed to React and element properties and events\n     * are updated in componentDidMount/componentDidUpdate.\n     *\n     */\n    override render() {\n      // Since refs only get fulfilled once, pass a new one if the user's\n      // ref changed. This allows refs to be fulfilled as expected, going from\n      // having a value to null.\n      const userRef = this.props.__forwardedRef as React.Ref<unknown>;\n      if (this._ref === undefined || this._userRef !== userRef) {\n        this._ref = (value: I | null) => {\n          if (this._element === null) {\n            this._element = value;\n          }\n          if (userRef !== null) {\n            setRef(userRef, value);\n          }\n          this._userRef = userRef;\n        };\n      }\n      // Filters class properties out and passes the remaining\n      // attributes to React. This allows attributes to use framework rules\n      // for setting attributes and render correctly under SSR.\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const props: any = {ref: this._ref};\n      // Note, save element props while iterating to avoid the need to\n      // iterate again when setting properties.\n      this._elementProps = {};\n      for (const [k, v] of Object.entries(this.props)) {\n        if (k === '__forwardedRef') continue;\n\n        if (elementClassProps.has(k)) {\n          this._elementProps[k] = v;\n        } else {\n          // React does *not* handle `className` for custom elements so\n          // coerce it to `class` so it's handled correctly.\n          props[k === 'className' ? 'class' : k] = v;\n        }\n      }\n      return createElement(tagName, props);\n    }\n  }\n\n  const ForwardedComponent = React.forwardRef(\n    (props?: UserProps, ref?: React.Ref<unknown>) =>\n      createElement(\n        ReactComponent,\n        {...props, __forwardedRef: ref} as ComponentProps,\n        props?.children\n      )\n  );\n\n  // To ease debugging in the React Developer Tools\n  ForwardedComponent.displayName = ReactComponent.displayName;\n\n  return ForwardedComponent;\n};\n"],
-  "mappings": "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",
-  "names": ["React", "reservedReactProperties", "Set", "listenedEvents", "WeakMap", "setProperty", "node", "name", "value", "old", "events", "event", "listener", "get", "set", "Map", "handler", "handleEvent", "addEventListener", "delete", "removeEventListener", "createComponent", "React", "tagName", "elementClass", "displayName", "Component", "createElement", "elementClassProps", "Object", "keys", "p", "prototype", "HTMLElement", "has", "console", "warn", "add", "ReactComponent", "constructor", "this", "_element", "_updateElement", "oldProps", "prop", "_elementProps", "props", "componentDidMount", "componentDidUpdate", "render", "userRef", "__forwardedRef", "_ref", "_userRef", "ref", "current", "k", "v", "entries", "ForwardedComponent", "forwardRef", "children", "BlBadge", "s", "React", "BlButton", "BlIcon", "BlInput", "BlProgressIndicator", "BlTabGroup", "BlTooltip", "BlTab", "BlTabPanel"]
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-nocheck\nimport React from 'react';\nimport { createComponent } from '@lit-labs/react';\n\nexport const BlAlert = createComponent(\n  React,\n  'bl-alert',\n  customElements.get('bl-alert'),\n  { onClose: 'bl-close' }\n);\n\nexport const BlBadge = createComponent(\n  React,\n  'bl-badge',\n  customElements.get('bl-badge'),\n  {}\n);\n\nexport const BlButton = createComponent(\n  React,\n  'bl-button',\n  customElements.get('bl-button'),\n  { onClick: 'bl-click' }\n);\n\nexport const BlIcon = createComponent(\n  React,\n  'bl-icon',\n  customElements.get('bl-icon'),\n  { onLoad: 'bl-load', onError: 'bl-error' }\n);\n\nexport const BlInput = createComponent(\n  React,\n  'bl-input',\n  customElements.get('bl-input'),\n  { onChange: 'bl-change', onInput: 'bl-input' }\n);\n\nexport const BlProgressIndicator = createComponent(\n  React,\n  'bl-progress-indicator',\n  customElements.get('bl-progress-indicator'),\n  {}\n);\n\nexport const BlTabGroup = createComponent(\n  React,\n  'bl-tab-group',\n  customElements.get('bl-tab-group'),\n  {}\n);\n\nexport const BlTooltip = createComponent(\n  React,\n  'bl-tooltip',\n  customElements.get('bl-tooltip'),\n  { onShow: 'bl-tooltip-show', onHide: 'bl-tooltip-hide' }\n);\n\nexport const BlTab = createComponent(\n  React,\n  'bl-tab',\n  customElements.get('bl-tab'),\n  { onSelected: 'bl-tab-selected' }\n);\n\nexport const BlTabPanel = createComponent(\n  React,\n  'bl-tab-panel',\n  customElements.get('bl-tab-panel'),\n  {}\n);\n", "/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nconst reservedReactProperties = new Set([\n  'children',\n  'localName',\n  'ref',\n  'style',\n  'className',\n]);\n\nconst listenedEvents: WeakMap<\n  Element,\n  Map<string, EventListenerObject>\n> = new WeakMap();\n\n/**\n * Adds an event listener for the specified event to the given node. In the\n * React setup, there should only ever be one event listener. Thus, for\n * efficiency only one listener is added and the handler for that listener is\n * updated to point to the given listener function.\n */\nconst addOrUpdateEventListener = (\n  node: Element,\n  event: string,\n  listener: (event?: Event) => void\n) => {\n  let events = listenedEvents.get(node);\n  if (events === undefined) {\n    listenedEvents.set(node, (events = new Map()));\n  }\n  let handler = events.get(event);\n  if (listener !== undefined) {\n    // If necessary, add listener and track handler\n    if (handler === undefined) {\n      events.set(event, (handler = {handleEvent: listener}));\n      node.addEventListener(event, handler);\n      // Otherwise just update the listener with new value\n    } else {\n      handler.handleEvent = listener;\n    }\n    // Remove listener if one exists and value is undefined\n  } else if (handler !== undefined) {\n    events.delete(event);\n    node.removeEventListener(event, handler);\n  }\n};\n\n/**\n * Sets properties and events on custom elements. These properties and events\n * have been pre-filtered so we know they should apply to the custom element.\n */\nconst setProperty = <E extends Element>(\n  node: E,\n  name: string,\n  value: unknown,\n  old: unknown,\n  events?: Events\n) => {\n  const event = events?.[name];\n  if (event !== undefined) {\n    // Dirty check event value.\n    if (value !== old) {\n      addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n    }\n  } else {\n    // But don't dirty check properties; elements are assumed to do this.\n    node[name as keyof E] = value as E[keyof E];\n  }\n};\n\n// Set a React ref. Note, there are 2 kinds of refs and there's no built in\n// React API to set a ref.\nconst setRef = (ref: React.Ref<unknown>, value: Element | null) => {\n  if (typeof ref === 'function') {\n    (ref as (e: Element | null) => void)(value);\n  } else {\n    (ref as {current: Element | null}).current = value;\n  }\n};\n\ntype Constructor<T> = {new (): T};\n\n/***\n * Typecast that curries an Event type through a string. The goal of the type\n * cast is to match a prop name to a typed event callback.\n */\nexport type EventName<T extends Event = Event> = string & {\n  __event_type: T;\n};\n\ntype Events = Record<string, EventName | string>;\n\ntype EventProps<R extends Events> = {\n  [K in keyof R]: R[K] extends EventName\n    ? (e: R[K]['__event_type']) => void\n    : (e: Event) => void;\n};\n\n/**\n * Creates a React component for a custom element. Properties are distinguished\n * from attributes automatically, and events can be configured so they are\n * added to the custom element as event listeners.\n *\n * @param React The React module, typically imported from the `react` npm\n * package.\n * @param tagName The custom element tag name registered via\n * `customElements.define`.\n * @param elementClass The custom element class registered via\n * `customElements.define`.\n * @param events An object listing events to which the component can listen. The\n * object keys are the event property names passed in via React props and the\n * object values are the names of the corresponding events generated by the\n * custom element. For example, given `{onactivate: 'activate'}` an event\n * function may be passed via the component's `onactivate` prop and will be\n * called when the custom element fires its `activate` event.\n * @param displayName A React component display name, used in debugging\n * messages. Default value is inferred from the name of custom element class\n * registered via `customElements.define`.\n */\nexport const createComponent = <I extends HTMLElement, E extends Events = {}>(\n  React: typeof window.React,\n  tagName: string,\n  elementClass: Constructor<I>,\n  events?: E,\n  displayName?: string\n) => {\n  const Component = React.Component;\n  const createElement = React.createElement;\n\n  // Props the user is allowed to use, includes standard attributes, children,\n  // ref, as well as special event and element properties.\n  type ReactProps = Omit<React.HTMLAttributes<I>, keyof E>;\n  type ElementWithoutPropsOrEvents = Omit<I, keyof E | keyof ReactProps>;\n  type UserProps = Partial<\n    ReactProps & ElementWithoutPropsOrEvents & EventProps<E>\n  >;\n\n  // Props used by this component wrapper. This is the UserProps and the\n  // special `__forwardedRef` property. Note, this ref is special because\n  // it's both needed in this component to get access to the rendered element\n  // and must fulfill any ref passed by the user.\n  type ComponentProps = UserProps & {\n    __forwardedRef?: React.Ref<unknown>;\n  };\n\n  // Set of properties/events which should be specially handled by the wrapper\n  // and not handled directly by React.\n  const elementClassProps = new Set(Object.keys(events ?? {}));\n  for (const p in elementClass.prototype) {\n    if (!(p in HTMLElement.prototype)) {\n      if (reservedReactProperties.has(p)) {\n        // Note, this effectively warns only for `ref` since the other\n        // reserved props are on HTMLElement.prototype. To address this\n        // would require crawling down the prototype, which doesn't feel worth\n        // it since implementing these properties on an element is extremely\n        // rare.\n        console.warn(\n          `${tagName} contains property ${p} which is a React ` +\n            `reserved property. It will be used by React and not set on ` +\n            `the element.`\n        );\n      } else {\n        elementClassProps.add(p);\n      }\n    }\n  }\n\n  class ReactComponent extends Component<ComponentProps> {\n    private _element: I | null = null;\n    private _elementProps!: {[index: string]: unknown};\n    private _userRef?: React.Ref<unknown>;\n    private _ref?: React.RefCallback<I>;\n\n    static displayName = displayName ?? elementClass.name;\n\n    private _updateElement(oldProps?: ComponentProps) {\n      if (this._element === null) {\n        return;\n      }\n      // Set element properties to the values in `this.props`\n      for (const prop in this._elementProps) {\n        setProperty(\n          this._element,\n          prop,\n          this.props[prop as keyof ComponentProps],\n          oldProps ? oldProps[prop as keyof ComponentProps] : undefined,\n          events\n        );\n      }\n      // Note, the spirit of React might be to \"unset\" any old values that\n      // are no longer included; however, there's no reasonable value to set\n      // them to so we just leave the previous state as is.\n    }\n\n    /**\n     * Updates element properties correctly setting properties\n     * on mount.\n     */\n    override componentDidMount() {\n      this._updateElement();\n    }\n\n    /**\n     * Updates element properties correctly setting properties\n     * on every update. Note, this does not include mount.\n     */\n    override componentDidUpdate(old: ComponentProps) {\n      this._updateElement(old);\n    }\n\n    /**\n     * Renders the custom element with a `ref` prop which allows this\n     * component to reference the custom element.\n     *\n     * Standard attributes are passed to React and element properties and events\n     * are updated in componentDidMount/componentDidUpdate.\n     *\n     */\n    override render() {\n      // Since refs only get fulfilled once, pass a new one if the user's\n      // ref changed. This allows refs to be fulfilled as expected, going from\n      // having a value to null.\n      const userRef = this.props.__forwardedRef as React.Ref<unknown>;\n      if (this._ref === undefined || this._userRef !== userRef) {\n        this._ref = (value: I | null) => {\n          if (this._element === null) {\n            this._element = value;\n          }\n          if (userRef !== null) {\n            setRef(userRef, value);\n          }\n          this._userRef = userRef;\n        };\n      }\n      // Filters class properties out and passes the remaining\n      // attributes to React. This allows attributes to use framework rules\n      // for setting attributes and render correctly under SSR.\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const props: any = {ref: this._ref};\n      // Note, save element props while iterating to avoid the need to\n      // iterate again when setting properties.\n      this._elementProps = {};\n      for (const [k, v] of Object.entries(this.props)) {\n        if (k === '__forwardedRef') continue;\n\n        if (elementClassProps.has(k)) {\n          this._elementProps[k] = v;\n        } else {\n          // React does *not* handle `className` for custom elements so\n          // coerce it to `class` so it's handled correctly.\n          props[k === 'className' ? 'class' : k] = v;\n        }\n      }\n      return createElement(tagName, props);\n    }\n  }\n\n  const ForwardedComponent = React.forwardRef(\n    (props?: UserProps, ref?: React.Ref<unknown>) =>\n      createElement(\n        ReactComponent,\n        {...props, __forwardedRef: ref} as ComponentProps,\n        props?.children\n      )\n  );\n\n  // To ease debugging in the React Developer Tools\n  ForwardedComponent.displayName = ReactComponent.displayName;\n\n  return ForwardedComponent;\n};\n"],
+  "mappings": "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",
+  "names": ["React", "reservedReactProperties", "Set", "listenedEvents", "WeakMap", "setProperty", "node", "name", "value", "old", "events", "event", "listener", "get", "set", "Map", "handler", "handleEvent", "addEventListener", "delete", "removeEventListener", "createComponent", "React", "tagName", "elementClass", "displayName", "Component", "createElement", "elementClassProps", "Object", "keys", "p", "prototype", "HTMLElement", "has", "console", "warn", "add", "ReactComponent", "constructor", "this", "_element", "_updateElement", "oldProps", "prop", "_elementProps", "props", "componentDidMount", "componentDidUpdate", "render", "userRef", "__forwardedRef", "_ref", "_userRef", "ref", "current", "k", "v", "entries", "ForwardedComponent", "forwardRef", "children", "BlAlert", "s", "React", "BlBadge", "BlButton", "BlIcon", "BlInput", "BlProgressIndicator", "BlTabGroup", "BlTooltip", "BlTab", "BlTabPanel"]
 }

package/dist/baklava.js

@@ -1,2 +1,2 @@
-import{a as s}from"./chunk-CEIAWSNF.js";import{a as p}from"./chunk-DCSIJZKF.js";import{a as f}from"./chunk-5YWWSNRQ.js";import{a as u}from"./chunk-RLRHLKBD.js";import{a as r}from"./chunk-E6WXDMOY.js";import{a as e}from"./chunk-DT3I7BV7.js";import{a as l}from"./chunk-VX2FHEEO.js";import"./chunk-E2DT737L.js";import"./chunk-W53DEGK2.js";import{a as o,b as t,c as a}from"./chunk-SJW4HPSY.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import{a as d}from"./chunk-DJNJ4CN4.js";import"./chunk-S7TTXZFP.js";import"./chunk-NZ3RGSR6.js";export{r as BlBadge,e as BlButton,a as BlIcon,l as BlInput,d as BlProgressIndicator,f as BlTab,s as BlTabGroup,p as BlTabPanel,u as BlTooltip,t as getIconPath,o as setIconPath};
+import{a as d}from"./chunk-DJNJ4CN4.js";import{a as s}from"./chunk-CEIAWSNF.js";import{a as f}from"./chunk-5YWWSNRQ.js";import{a as p}from"./chunk-DCSIJZKF.js";import{a as u}from"./chunk-RLRHLKBD.js";import{a as B}from"./chunk-AS43M6VT.js";import{a as r}from"./chunk-E6WXDMOY.js";import{a as e}from"./chunk-DT3I7BV7.js";import{a as l}from"./chunk-VX2FHEEO.js";import"./chunk-E2DT737L.js";import"./chunk-W53DEGK2.js";import{a as o,b as t,c as a}from"./chunk-SJW4HPSY.js";import"./chunk-72IJCTLJ.js";import"./chunk-23UFIOHV.js";import"./chunk-S7TTXZFP.js";import"./chunk-NZ3RGSR6.js";export{B as BlAlert,r as BlBadge,e as BlButton,a as BlIcon,l as BlInput,d as BlProgressIndicator,f as BlTab,s as BlTabGroup,p as BlTabPanel,u as BlTooltip,t as getIconPath,o as setIconPath};
 //# sourceMappingURL=baklava.js.map

package/dist/chunk-AS43M6VT.js

@@ -0,0 +1,24 @@
+import{a as b}from"./chunk-E2DT737L.js";import{a as m}from"./chunk-W53DEGK2.js";import{a as u}from"./chunk-23UFIOHV.js";import{a as c,b as n,f as p,g as d,h as r}from"./chunk-S7TTXZFP.js";import{a as o}from"./chunk-NZ3RGSR6.js";var h=c`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-accent-primary-background);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-content-primary);box-shadow:0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding)}.description{font:var(--bl-font-title-3-regular)}.wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex:auto}.content{display:flex;align-items:center;padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);flex:20 1 70%}.icon{margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--main-color);font:var(--bl-font-title-3-medium);margin-bottom:var(--bl-size-4xs)}.action{display:flex;align-items:center;flex:1 1 0%}.caption+.description{font:var(--bl-font-caption-text)}.close-spaced{margin-top:calc(var(--padding) / 2)}:host([closed]){display:none}:host([variant='success']) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-background)}:host([variant='warning']) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-background)}:host([variant='danger']) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-background)}`,f=h;var g=()=>({fromAttribute:a=>!a||a==="true"?!0:a==="false"?!1:a});var t=class extends p{constructor(){super(...arguments);this.variant="info";this.closable=!1;this.closed=!1}static get styles(){return[f]}open(){this.closed=!1}close(){this.closed=!0}get _hasAlertCaptionSlot(){return this.querySelector(':scope > [slot="caption"]')!==null}_closeHandler(){this.closed=!0,this.onClose(!0)}_predefinedIcons(){switch(this.variant){case"success":return"check_fill";case"danger":return"close_fill";default:return this.variant}}_getIcon(){if(!!this.icon)return this.icon===!0?this._predefinedIcons():this.icon}_initAlertActionSlot(i){i.target.assignedElements().forEach(e=>{var s;if(e.tagName!=="BL-BUTTON"){(s=e.parentNode)==null||s.removeChild(e);return}e.setAttribute("variant","secondary"),e.setAttribute("kind","text"),e.setAttribute("size","medium"),e.removeAttribute("icon")})}render(){let i=this.caption||this._hasAlertCaptionSlot?n`<span class="caption">
+            <slot name="caption"> ${this.caption} </slot>
+          </span>`:null,l=this._getIcon()?n`<bl-icon class="icon" name=${b(this._getIcon())}></bl-icon>`:null,e=m({close:!0,"close-spaced":!!i}),s=this.closable?n`<bl-button
+          class=${e}
+          label="close"
+          kind="text"
+          icon="close"
+          variant="secondary"
+          @click=${this._closeHandler}
+        ></bl-button>`:null,v=n`<span class="description">
+      <slot> ${this.description} </slot>
+    </span>`;return n`
+      <div class="alert">
+        <div class="wrapper">
+          <div class="content">
+            ${l}
+            <div class="text-content">${i} ${v}</div>
+          </div>
+          <slot class="action" name="action" @slotchange=${this._initAlertActionSlot}></slot>
+        </div>
+        ${s}
+      </div>
+    `}};o([r({reflect:!0})],t.prototype,"variant",2),o([r()],t.prototype,"description",2),o([r({converter:g()})],t.prototype,"icon",2),o([r({type:Boolean,reflect:!0})],t.prototype,"closable",2),o([r()],t.prototype,"caption",2),o([r({type:Boolean,reflect:!0})],t.prototype,"closed",2),o([u("bl-close")],t.prototype,"onClose",2),t=o([d("bl-alert")],t);export{t as a};
+//# sourceMappingURL=chunk-AS43M6VT.js.map

package/dist/chunk-AS43M6VT.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/alert/bl-alert.css", "../src/utilities/string-boolean.converter.ts", "../src/components/alert/bl-alert.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-accent-primary-background);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-content-primary);box-shadow:0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding)}.description{font:var(--bl-font-title-3-regular)}.wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex:auto}.content{display:flex;align-items:center;padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);flex:20 1 70%}.icon{margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--main-color);font:var(--bl-font-title-3-medium);margin-bottom:var(--bl-size-4xs)}.action{display:flex;align-items:center;flex:1 1 0%}.caption+.description{font:var(--bl-font-caption-text)}.close-spaced{margin-top:calc(var(--padding) / 2)}:host([closed]){display:none}:host([variant='success']) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-background)}:host([variant='warning']) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-background)}:host([variant='danger']) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-background)}`;\nexport default styles;\n", "import type { ComplexAttributeConverter } from 'lit';\n\nexport const stringBooleanConverter = (): ComplexAttributeConverter<string | boolean> => {\n  return {\n    fromAttribute: (value: string): string | boolean => {\n      if (!value || value === 'true') return true;\n      if (value === 'false') return false;\n      return value;\n    },\n  };\n};\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-alert.css';\nimport '../icon/bl-icon';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { stringBooleanConverter } from '../../utilities/string-boolean.converter';\nimport { ButtonVariant, ButtonKind, ButtonSize } from '../button/bl-button';\nimport { classMap } from 'lit/directives/class-map.js';\n\nexport type AlertVariant = 'info' | 'warning' | 'success' | 'danger';\n\n/**\n * @tag bl-alert\n * @summary Baklava Alert component\n */\n\n@customElement('bl-alert')\nexport default class BlAlert extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets alert variant\n   */\n  @property({ reflect: true })\n  variant: AlertVariant = 'info';\n\n  /**\n   * Sets alert description\n   */\n  @property()\n  description?: 'string';\n\n  /**\n   * Allows to customize alert icon\n   */\n  @property({ converter: stringBooleanConverter() })\n  icon?: boolean | string;\n\n  /**\n   * Displays a close button.\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * Sets alert caption.\n   */\n  @property()\n  caption?: string;\n\n  /**\n   * Sets alert components display state.\n   */\n  @property({ type: Boolean, reflect: true })\n  closed = false;\n\n  /**\n   * Opens alert component.\n   */\n  public open() {\n    this.closed = false;\n  }\n\n  /**\n   * Closes alert component.\n   */\n  public close() {\n    this.closed = true;\n  }\n\n  /**\n   * Fires when close button clicked.\n   */\n  @event('bl-close') private onClose: EventDispatcher<boolean>;\n\n  private get _hasAlertCaptionSlot() {\n    return this.querySelector(':scope > [slot=\"caption\"]') !== null;\n  }\n\n  private _closeHandler() {\n    this.closed = true;\n    this.onClose(true);\n  }\n\n  private _predefinedIcons() {\n    switch (this.variant) {\n      case 'success':\n        return 'check_fill';\n      case 'danger':\n        return 'close_fill';\n      default:\n        return this.variant;\n    }\n  }\n\n  private _getIcon(): string | undefined {\n    if (!this.icon) return;\n    if (this.icon === true) return this._predefinedIcons();\n    return this.icon;\n  }\n\n  private _initAlertActionSlot(event: Event) {\n    const slotElements = (event.target as HTMLSlotElement).assignedElements();\n    slotElements.forEach(element => {\n      if (element.tagName !== 'BL-BUTTON') {\n        element.parentNode?.removeChild(element);\n        return;\n      }\n      element.setAttribute('variant', 'secondary' as ButtonVariant);\n      element.setAttribute('kind', 'text' as ButtonKind);\n      element.setAttribute('size', 'medium' as ButtonSize);\n      element.removeAttribute('icon');\n    });\n  }\n\n  render(): TemplateResult {\n    const caption =\n      this.caption || this._hasAlertCaptionSlot\n        ? html`<span class=\"caption\">\n            <slot name=\"caption\"> ${this.caption} </slot>\n          </span>`\n        : null;\n    const icon = this._getIcon()\n      ? html`<bl-icon class=\"icon\" name=${ifDefined(this._getIcon())}></bl-icon>`\n      : null;\n\n    const closeClasses = classMap({\n      'close': true,\n      'close-spaced': !!caption,\n    });\n\n    const closable = this.closable\n      ? html`<bl-button\n          class=${closeClasses}\n          label=\"close\"\n          kind=\"text\"\n          icon=\"close\"\n          variant=\"secondary\"\n          @click=${this._closeHandler}\n        ></bl-button>`\n      : null;\n    const description = html`<span class=\"description\">\n      <slot> ${this.description} </slot>\n    </span>`;\n\n    return html`\n      <div class=\"alert\">\n        <div class=\"wrapper\">\n          <div class=\"content\">\n            ${icon}\n            <div class=\"text-content\">${caption} ${description}</div>\n          </div>\n          <slot class=\"action\" name=\"action\" @slotchange=${this._initAlertActionSlot}></slot>\n        </div>\n        ${closable}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-alert': BlAlert;\n  }\n}\n"],
+  "mappings": "oOACO,IAAMA,EAASC,47CACfC,EAAQF,ECAR,IAAMG,EAAyB,KAC7B,CACL,cAAgBC,GACV,CAACA,GAASA,IAAU,OAAe,GACnCA,IAAU,QAAgB,GACvBA,CAEX,GCSF,IAAqBC,EAArB,cAAqCC,CAAW,CAAhD,kCASE,aAAwB,OAkBxB,cAAW,GAYX,YAAS,GAtCT,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAyCO,MAAO,CACZ,KAAK,OAAS,EAChB,CAKO,OAAQ,CACb,KAAK,OAAS,EAChB,CAOA,IAAY,sBAAuB,CACjC,OAAO,KAAK,cAAc,2BAA2B,IAAM,IAC7D,CAEQ,eAAgB,CACtB,KAAK,OAAS,GACd,KAAK,QAAQ,EAAI,CACnB,CAEQ,kBAAmB,CACzB,OAAQ,KAAK,aACN,UACH,MAAO,iBACJ,SACH,MAAO,qBAEP,OAAO,KAAK,QAElB,CAEQ,UAA+B,CACrC,GAAI,EAAC,KAAK,KACV,OAAI,KAAK,OAAS,GAAa,KAAK,iBAAiB,EAC9C,KAAK,IACd,CAEQ,qBAAqBC,EAAc,CACnBA,EAAM,OAA2B,iBAAiB,EAC3D,QAAQC,GAAW,CA1GpC,IAAAC,EA2GM,GAAID,EAAQ,UAAY,YAAa,EACnCC,EAAAD,EAAQ,aAAR,MAAAC,EAAoB,YAAYD,GAChC,MACF,CACAA,EAAQ,aAAa,UAAW,WAA4B,EAC5DA,EAAQ,aAAa,OAAQ,MAAoB,EACjDA,EAAQ,aAAa,OAAQ,QAAsB,EACnDA,EAAQ,gBAAgB,MAAM,CAChC,CAAC,CACH,CAEA,QAAyB,CACvB,IAAME,EACJ,KAAK,SAAW,KAAK,qBACjBC;AAAA,oCAC0B,KAAK;AAAA,mBAE/B,KACAC,EAAO,KAAK,SAAS,EACvBD,+BAAkCE,EAAU,KAAK,SAAS,CAAC,eAC3D,KAEEC,EAAeC,EAAS,CAC5B,MAAS,GACT,eAAgB,CAAC,CAACL,CACpB,CAAC,EAEKM,EAAW,KAAK,SAClBL;AAAA,kBACUG;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKC,KAAK;AAAA,uBAEhB,KACEG,EAAcN;AAAA,eACT,KAAK;AAAA,aAGhB,OAAOA;AAAA;AAAA;AAAA;AAAA,cAIGC;AAAA,wCAC0BF,KAAWO;AAAA;AAAA,2DAEQ,KAAK;AAAA;AAAA,UAEtDD;AAAA;AAAA,KAGR,CACF,EAtIEE,EAAA,CADCC,EAAS,CAAE,QAAS,EAAK,CAAC,GARRf,EASnB,uBAMAc,EAAA,CADCC,EAAS,GAdSf,EAenB,2BAMAc,EAAA,CADCC,EAAS,CAAE,UAAWC,EAAuB,CAAE,CAAC,GApB9BhB,EAqBnB,oBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1BvBf,EA2BnB,wBAMAc,EAAA,CADCC,EAAS,GAhCSf,EAiCnB,uBAMAc,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAtCvBf,EAuCnB,sBAmB2Bc,EAAA,CAA1BX,EAAM,UAAU,GA1DEH,EA0DQ,uBA1DRA,EAArBc,EAAA,CADCG,EAAc,UAAU,GACJjB",
+  "names": ["styles", "r", "bl_alert_default", "stringBooleanConverter", "value", "BlAlert", "s", "bl_alert_default", "event", "element", "_a", "caption", "$", "icon", "l", "closeClasses", "o", "closable", "description", "__decorateClass", "e", "stringBooleanConverter", "n"]
+}

package/dist/components/alert/bl-alert.js

@@ -0,0 +1,2 @@
+import{a}from"../../chunk-AS43M6VT.js";import"../../chunk-E2DT737L.js";import"../../chunk-W53DEGK2.js";import"../../chunk-SJW4HPSY.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-S7TTXZFP.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
+//# sourceMappingURL=bl-alert.js.map

package/dist/components/alert/bl-alert.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/tab-group/bl-tab-group.js

@@ -1,2 +1,2 @@
-import{a}from"../../chunk-CEIAWSNF.js";import"../../chunk-DCSIJZKF.js";import"../../chunk-5YWWSNRQ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-S7TTXZFP.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
+import{a}from"../../chunk-CEIAWSNF.js";import"../../chunk-5YWWSNRQ.js";import"../../chunk-DCSIJZKF.js";import"../../chunk-23UFIOHV.js";import"../../chunk-S7TTXZFP.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
 //# sourceMappingURL=bl-tab-group.js.map

package/dist/custom-elements.json

@@ -2,6 +2,104 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/components/alert/bl-alert.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "BlAlert",
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<boolean>"
+              },
+              "description": "Fires when close button clicked.",
+              "name": "bl-close"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "AlertVariant"
+              },
+              "default": "'info'",
+              "description": "Sets alert variant",
+              "fieldName": "variant"
+            },
+            {
+              "name": "description",
+              "type": {
+                "text": "'string' | undefined"
+              },
+              "description": "Sets alert description",
+              "fieldName": "description"
+            },
+            {
+              "name": "icon",
+              "type": {
+                "text": "boolean | string | undefined"
+              },
+              "description": "Allows to customize alert icon",
+              "fieldName": "icon"
+            },
+            {
+              "name": "closable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Displays a close button.",
+              "fieldName": "closable"
+            },
+            {
+              "name": "caption",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Sets alert caption.",
+              "fieldName": "caption"
+            },
+            {
+              "name": "closed",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets alert components display state.",
+              "fieldName": "closed"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "bl-alert",
+          "summary": "Baklava Alert component",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "BlAlert",
+            "module": "src/components/alert/bl-alert.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bl-alert",
+          "declaration": {
+            "name": "BlAlert",
+            "module": "src/components/alert/bl-alert.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/badge/bl-badge.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendyol/baklava",
-  "version": "2.0.0-beta.24",
+  "version": "2.0.0-beta.25",
   "description": "Trendyol Baklava Design System",
   "main": "dist/baklava.js",
   "module": "dist/baklava.js",
@@ -77,6 +77,7 @@
     "@storybook/addon-interactions": "^6.5.9",
     "@storybook/addon-links": "6.5.9",
     "@storybook/addon-storysource": "6.5.9",
+    "@storybook/addon-viewport": "^6.5.10",
     "@storybook/jest": "^0.0.10",
     "@storybook/storybook-deployer": "^2.8.11",
     "@storybook/testing-library": "^0.0.13",