@getflip/swirl-components 0.49.2 → 0.50.0

package/dist/components/floating-ui.dom.esm.js

@@ -1,19 +1,19 @@
-function getSide(placement) {
-  return placement.split('-')[0];
-}
-
 function getAlignment(placement) {
   return placement.split('-')[1];
 }
 
-function getMainAxisFromPlacement(placement) {
-  return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y';
-}
-
 function getLengthFromAxis(axis) {
   return axis === 'y' ? 'height' : 'width';
 }
 
+function getSide(placement) {
+  return placement.split('-')[0];
+}
+
+function getMainAxisFromPlacement(placement) {
+  return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y';
+}
+
 function computeCoordsFromPlacement(_ref, placement, rtl) {
   let {
     reference,
@@ -27,7 +27,6 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   const side = getSide(placement);
   const isVertical = mainAxis === 'x';
   let coords;
-
   switch (side) {
     case 'top':
       coords = {
@@ -35,45 +34,38 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
         y: reference.y - floating.height
       };
       break;
-
     case 'bottom':
       coords = {
         x: commonX,
         y: reference.y + reference.height
       };
       break;
-
     case 'right':
       coords = {
         x: reference.x + reference.width,
         y: commonY
       };
       break;
-
     case 'left':
       coords = {
         x: reference.x - floating.width,
         y: commonY
       };
       break;
-
     default:
       coords = {
         x: reference.x,
         y: reference.y
       };
   }
-
   switch (getAlignment(placement)) {
     case 'start':
       coords[mainAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
       break;
-
     case 'end':
       coords[mainAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
       break;
   }
-
   return coords;
 }
 
@@ -84,7 +76,6 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
  * This export does not have any `platform` interface logic. You will need to
  * write one for the platform you are using Floating UI with.
  */
-
 const computePosition$1 = async (reference, floating, config) => {
   const {
     placement = 'bottom',
@@ -92,8 +83,8 @@ const computePosition$1 = async (reference, floating, config) => {
     middleware = [],
     platform
   } = config;
+  const validMiddleware = middleware.filter(Boolean);
   const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
-
   let rects = await platform.getElementRects({
     reference,
     floating,
@@ -106,12 +97,11 @@ const computePosition$1 = async (reference, floating, config) => {
   let statefulPlacement = placement;
   let middlewareData = {};
   let resetCount = 0;
-
-  for (let i = 0; i < middleware.length; i++) {
+  for (let i = 0; i < validMiddleware.length; i++) {
     const {
       name,
       fn
-    } = middleware[i];
+    } = validMiddleware[i];
     const {
       x: nextX,
       y: nextY,
@@ -133,20 +123,19 @@ const computePosition$1 = async (reference, floating, config) => {
     });
     x = nextX != null ? nextX : x;
     y = nextY != null ? nextY : y;
-    middlewareData = { ...middlewareData,
-      [name]: { ...middlewareData[name],
+    middlewareData = {
+      ...middlewareData,
+      [name]: {
+        ...middlewareData[name],
         ...data
       }
     };
-
     if (reset && resetCount <= 50) {
       resetCount++;
-
       if (typeof reset === 'object') {
         if (reset.placement) {
           statefulPlacement = reset.placement;
         }
-
         if (reset.rects) {
           rects = reset.rects === true ? await platform.getElementRects({
             reference,
@@ -154,18 +143,15 @@ const computePosition$1 = async (reference, floating, config) => {
             strategy
           }) : reset.rects;
         }
-
         ({
           x,
           y
         } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
       }
-
       i = -1;
       continue;
     }
   }
-
   return {
     x,
     y,
@@ -195,7 +181,8 @@ function getSideObjectFromPadding(padding) {
 }
 
 function rectToClientRect(rect) {
-  return { ...rect,
+  return {
+    ...rect,
     top: rect.y,
     left: rect.x,
     right: rect.x + rect.width,
@@ -205,19 +192,17 @@ function rectToClientRect(rect) {
 
 /**
  * Resolves with an object of overflow side offsets that determine how much the
- * element is overflowing a given clipping boundary.
+ * element is overflowing a given clipping boundary on each side.
  * - positive = overflowing the boundary by that number of pixels
  * - negative = how many pixels left before it will overflow
  * - 0 = lies flush with the boundary
  * @see https://floating-ui.com/docs/detectOverflow
  */
-async function detectOverflow(middlewareArguments, options) {
+async function detectOverflow(state, options) {
   var _await$platform$isEle;
-
   if (options === void 0) {
     options = {};
   }
-
   const {
     x,
     y,
@@ -225,7 +210,7 @@ async function detectOverflow(middlewareArguments, options) {
     rects,
     elements,
     strategy
-  } = middlewareArguments;
+  } = state;
   const {
     boundary = 'clippingAncestors',
     rootBoundary = 'viewport',
@@ -242,19 +227,29 @@ async function detectOverflow(middlewareArguments, options) {
     rootBoundary,
     strategy
   }));
+  const rect = elementContext === 'floating' ? {
+    ...rects.floating,
+    x,
+    y
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
   const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
-    rect: elementContext === 'floating' ? { ...rects.floating,
-      x,
-      y
-    } : rects.reference,
-    offsetParent: await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)),
+    rect,
+    offsetParent,
     strategy
-  }) : rects[elementContext]);
+  }) : rect);
   return {
-    top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
-    bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
-    left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
-    right: elementClientRect.right - clippingClientRect.right + paddingObject.right
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
   };
 }
 
@@ -265,42 +260,39 @@ function within(min$1$1, value, max$1$1) {
   return max$1(min$1$1, min$1(value, max$1$1));
 }
 
-const hash$1 = {
+const oppositeSideMap = {
   left: 'right',
   right: 'left',
   bottom: 'top',
   top: 'bottom'
 };
 function getOppositePlacement(placement) {
-  return placement.replace(/left|right|bottom|top/g, matched => hash$1[matched]);
+  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
 }
 
 function getAlignmentSides(placement, rects, rtl) {
   if (rtl === void 0) {
     rtl = false;
   }
-
   const alignment = getAlignment(placement);
   const mainAxis = getMainAxisFromPlacement(placement);
   const length = getLengthFromAxis(mainAxis);
   let mainAlignmentSide = mainAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
-
   if (rects.reference[length] > rects.floating[length]) {
     mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
   }
-
   return {
     main: mainAlignmentSide,
     cross: getOppositePlacement(mainAlignmentSide)
   };
 }
 
-const hash = {
+const oppositeAlignmentMap = {
   start: 'end',
   end: 'start'
 };
 function getOppositeAlignmentPlacement(placement) {
-  return placement.replace(/start|end/g, matched => hash[matched]);
+  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
 }
 
 function getExpandedPlacements(placement) {
@@ -308,23 +300,50 @@ function getExpandedPlacements(placement) {
   return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
 }
 
+function getSideList(side, isStart, rtl) {
+  const lr = ['left', 'right'];
+  const rl = ['right', 'left'];
+  const tb = ['top', 'bottom'];
+  const bt = ['bottom', 'top'];
+  switch (side) {
+    case 'top':
+    case 'bottom':
+      if (rtl) return isStart ? rl : lr;
+      return isStart ? lr : rl;
+    case 'left':
+    case 'right':
+      return isStart ? tb : bt;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === 'start', rtl);
+  if (alignment) {
+    list = list.map(side => side + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
+
 /**
- * Changes the placement of the floating element to one that will fit if the
- * initially specified `placement` does not.
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
 const flip = function (options) {
   if (options === void 0) {
     options = {};
   }
-
   return {
     name: 'flip',
     options,
-
-    async fn(middlewareArguments) {
+    async fn(state) {
       var _middlewareData$flip;
-
       const {
         placement,
         middlewareData,
@@ -332,48 +351,49 @@ const flip = function (options) {
         initialPlacement,
         platform,
         elements
-      } = middlewareArguments;
+      } = state;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true,
         fallbackPlacements: specifiedFallbackPlacements,
         fallbackStrategy = 'bestFit',
+        fallbackAxisSideDirection = 'none',
         flipAlignment = true,
         ...detectOverflowOptions
       } = options;
       const side = getSide(placement);
-      const isBasePlacement = side === initialPlacement;
+      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+      const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
       const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
+        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+      }
       const placements = [initialPlacement, ...fallbackPlacements];
-      const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
+      const overflow = await detectOverflow(state, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
-
       if (checkMainAxis) {
         overflows.push(overflow[side]);
       }
-
       if (checkCrossAxis) {
         const {
           main,
           cross
-        } = getAlignmentSides(placement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+        } = getAlignmentSides(placement, rects, rtl);
         overflows.push(overflow[main], overflow[cross]);
       }
-
       overflowsData = [...overflowsData, {
         placement,
         overflows
-      }]; // One or more sides is overflowing
+      }];
 
+      // One or more sides is overflowing.
       if (!overflows.every(side => side <= 0)) {
-        var _middlewareData$flip$, _middlewareData$flip2;
-
-        const nextIndex = ((_middlewareData$flip$ = (_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) != null ? _middlewareData$flip$ : 0) + 1;
+        var _middlewareData$flip2, _overflowsData$filter;
+        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
         const nextPlacement = placements[nextIndex];
-
         if (nextPlacement) {
-          // Try next placement and re-run the lifecycle
+          // Try next placement and re-run the lifecycle.
           return {
             data: {
               index: nextIndex,
@@ -385,27 +405,27 @@ const flip = function (options) {
           };
         }
 
-        let resetPlacement = 'bottom';
-
-        switch (fallbackStrategy) {
-          case 'bestFit':
-            {
-              var _overflowsData$map$so;
-
-              const placement = (_overflowsData$map$so = overflowsData.map(d => [d, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0].placement;
-
-              if (placement) {
-                resetPlacement = placement;
+        // First, find the candidates that fit on the mainAxis side of overflow,
+        // then find the placement that fits the best on the main crossAxis side.
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+
+        // Otherwise fallback.
+        if (!resetPlacement) {
+          switch (fallbackStrategy) {
+            case 'bestFit':
+              {
+                var _overflowsData$map$so;
+                const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+                if (placement) {
+                  resetPlacement = placement;
+                }
+                break;
               }
-
+            case 'initialPlacement':
+              resetPlacement = initialPlacement;
               break;
-            }
-
-          case 'initialPlacement':
-            resetPlacement = initialPlacement;
-            break;
+          }
         }
-
         if (placement !== resetPlacement) {
           return {
             reset: {
@@ -414,27 +434,26 @@ const flip = function (options) {
           };
         }
       }
-
       return {};
     }
-
   };
 };
 
-async function convertValueToCoords(middlewareArguments, value) {
+async function convertValueToCoords(state, value) {
   const {
     placement,
     platform,
     elements
-  } = middlewareArguments;
+  } = state;
   const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getMainAxisFromPlacement(placement) === 'x';
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = typeof value === 'function' ? value(middlewareArguments) : value; // eslint-disable-next-line prefer-const
+  const rawValue = typeof value === 'function' ? value(state) : value;
 
+  // eslint-disable-next-line prefer-const
   let {
     mainAxis,
     crossAxis,
@@ -449,11 +468,9 @@ async function convertValueToCoords(middlewareArguments, value) {
     alignmentAxis: null,
     ...rawValue
   };
-
   if (alignment && typeof alignmentAxis === 'number') {
     crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
   }
-
   return isVertical ? {
     x: crossAxis * crossAxisMulti,
     y: mainAxis * mainAxisMulti
@@ -462,33 +479,33 @@ async function convertValueToCoords(middlewareArguments, value) {
     y: crossAxis * crossAxisMulti
   };
 }
+
 /**
- * Displaces the floating element from its reference element.
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
  * @see https://floating-ui.com/docs/offset
  */
-
 const offset = function (value) {
   if (value === void 0) {
     value = 0;
   }
-
   return {
     name: 'offset',
     options: value,
-
-    async fn(middlewareArguments) {
+    async fn(state) {
       const {
         x,
         y
-      } = middlewareArguments;
-      const diffCoords = await convertValueToCoords(middlewareArguments, value);
+      } = state;
+      const diffCoords = await convertValueToCoords(state, value);
       return {
         x: x + diffCoords.x,
         y: y + diffCoords.y,
         data: diffCoords
       };
     }
-
   };
 };
 
@@ -497,25 +514,23 @@ function getCrossAxis(axis) {
 }
 
 /**
- * Shifts the floating element in order to keep it in view when it will overflow
- * a clipping boundary.
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
 const shift = function (options) {
   if (options === void 0) {
     options = {};
   }
-
   return {
     name: 'shift',
     options,
-
-    async fn(middlewareArguments) {
+    async fn(state) {
       const {
         x,
         y,
         placement
-      } = middlewareArguments;
+      } = state;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = false,
@@ -537,12 +552,11 @@ const shift = function (options) {
         x,
         y
       };
-      const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
+      const overflow = await detectOverflow(state, detectOverflowOptions);
       const mainAxis = getMainAxisFromPlacement(getSide(placement));
       const crossAxis = getCrossAxis(mainAxis);
       let mainAxisCoord = coords[mainAxis];
       let crossAxisCoord = coords[crossAxis];
-
       if (checkMainAxis) {
         const minSide = mainAxis === 'y' ? 'top' : 'left';
         const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
@@ -550,7 +564,6 @@ const shift = function (options) {
         const max = mainAxisCoord - overflow[maxSide];
         mainAxisCoord = within(min, mainAxisCoord, max);
       }
-
       if (checkCrossAxis) {
         const minSide = crossAxis === 'y' ? 'top' : 'left';
         const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
@@ -558,19 +571,19 @@ const shift = function (options) {
         const max = crossAxisCoord - overflow[maxSide];
         crossAxisCoord = within(min, crossAxisCoord, max);
       }
-
-      const limitedCoords = limiter.fn({ ...middlewareArguments,
+      const limitedCoords = limiter.fn({
+        ...state,
         [mainAxis]: mainAxisCoord,
         [crossAxis]: crossAxisCoord
       });
-      return { ...limitedCoords,
+      return {
+        ...limitedCoords,
         data: {
           x: limitedCoords.x - x,
           y: limitedCoords.y - y
         }
       };
     }
-
   };
 };
 

package/dist/components/swirl-icon-lock-person.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlIconLockPerson extends Components.SwirlIconLockPerson, HTMLElement {}
+export const SwirlIconLockPerson: {
+  prototype: SwirlIconLockPerson;
+  new (): SwirlIconLockPerson;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-icon-lock-person.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlIconCss = ":host{display:inline-flex}";
+
+const SwirlIconLockPerson$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M12 11.9998C12.2777 11.9998 12.5138 11.9026 12.7083 11.7082C12.9027 11.5137 13 11.2776 13 10.9998C13 10.7221 12.9027 10.4859 12.7083 10.2915C12.5138 10.0971 12.2777 9.99984 12 9.99984C11.7222 9.99984 11.4861 10.0971 11.2916 10.2915C11.0972 10.4859 11 10.7221 11 10.9998C11 11.2776 11.0972 11.5137 11.2916 11.7082C11.4861 11.9026 11.7222 11.9998 12 11.9998ZM12 13.9998C12.3333 13.9998 12.6444 13.9221 12.9333 13.7665C13.2222 13.6109 13.4611 13.3943 13.65 13.1165C13.3944 12.9609 13.1277 12.8471 12.85 12.7748C12.5722 12.7026 12.2888 12.6665 12 12.6665C11.7111 12.6665 11.4277 12.7026 11.15 12.7748C10.8722 12.8471 10.6055 12.9609 10.35 13.1165C10.5388 13.3943 10.7777 13.6109 11.0666 13.7665C11.3555 13.9221 11.6666 13.9998 12 13.9998ZM5.99996 5.33317H9.99996V3.99984C9.99996 3.44428 9.80552 2.97206 9.41663 2.58317C9.02774 2.19428 8.55552 1.99984 7.99996 1.99984C7.4444 1.99984 6.97218 2.19428 6.58329 2.58317C6.1944 2.97206 5.99996 3.44428 5.99996 3.99984V5.33317ZM8.16663 14.6665H3.99996C3.63329 14.6665 3.3194 14.5359 3.05829 14.2748C2.79718 14.0137 2.66663 13.6998 2.66663 13.3332V6.6665C2.66663 6.29984 2.79718 5.98595 3.05829 5.72484C3.3194 5.46373 3.63329 5.33317 3.99996 5.33317H4.66663V3.99984C4.66663 3.07762 4.99163 2.2915 5.64163 1.6415C6.29163 0.991504 7.07774 0.666504 7.99996 0.666504C8.92218 0.666504 9.70829 0.991504 10.3583 1.6415C11.0083 2.2915 11.3333 3.07762 11.3333 3.99984V5.33317H12C12.3666 5.33317 12.6805 5.46373 12.9416 5.72484C13.2027 5.98595 13.3333 6.29984 13.3333 6.6665V7.53317C13.1333 7.4665 12.925 7.4165 12.7083 7.38317C12.4916 7.34984 12.2555 7.33317 12 7.33317V6.6665H3.99996V13.3332H7.53329C7.62218 13.5998 7.71107 13.8304 7.79996 14.0248C7.88885 14.2193 8.01107 14.4332 8.16663 14.6665ZM12 15.3332C11.0777 15.3332 10.2916 15.0082 9.64163 14.3582C8.99163 13.7082 8.66663 12.9221 8.66663 11.9998C8.66663 11.0776 8.99163 10.2915 9.64163 9.6415C10.2916 8.9915 11.0777 8.6665 12 8.6665C12.9222 8.6665 13.7083 8.9915 14.3583 9.6415C15.0083 10.2915 15.3333 11.0776 15.3333 11.9998C15.3333 12.9221 15.0083 13.7082 14.3583 14.3582C13.7083 15.0082 12.9222 15.3332 12 15.3332Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M18 18C18.4167 18 18.7708 17.8542 19.0625 17.5625C19.3542 17.2708 19.5 16.9167 19.5 16.5C19.5 16.0833 19.3542 15.7292 19.0625 15.4375C18.7708 15.1458 18.4167 15 18 15C17.5833 15 17.2292 15.1458 16.9375 15.4375C16.6458 15.7292 16.5 16.0833 16.5 16.5C16.5 16.9167 16.6458 17.2708 16.9375 17.5625C17.2292 17.8542 17.5833 18 18 18ZM18 21C18.5 21 18.9667 20.8833 19.4 20.65C19.8333 20.4167 20.1917 20.0917 20.475 19.675C20.0917 19.4417 19.6917 19.2708 19.275 19.1625C18.8583 19.0542 18.4333 19 18 19C17.5667 19 17.1417 19.0542 16.725 19.1625C16.3083 19.2708 15.9083 19.4417 15.525 19.675C15.8083 20.0917 16.1667 20.4167 16.6 20.65C17.0333 20.8833 17.5 21 18 21ZM9 8H15V6C15 5.16667 14.7083 4.45833 14.125 3.875C13.5417 3.29167 12.8333 3 12 3C11.1667 3 10.4583 3.29167 9.875 3.875C9.29167 4.45833 9 5.16667 9 6V8ZM12.25 22H6C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V10C4 9.45 4.19583 8.97917 4.5875 8.5875C4.97917 8.19583 5.45 8 6 8H7V6C7 4.61667 7.4875 3.4375 8.4625 2.4625C9.4375 1.4875 10.6167 1 12 1C13.3833 1 14.5625 1.4875 15.5375 2.4625C16.5125 3.4375 17 4.61667 17 6V8H18C18.55 8 19.0208 8.19583 19.4125 8.5875C19.8042 8.97917 20 9.45 20 10V11.3C19.7 11.2 19.3875 11.125 19.0625 11.075C18.7375 11.025 18.3833 11 18 11V10H6V20H11.3C11.4333 20.4 11.5667 20.7458 11.7 21.0375C11.8333 21.3292 12.0167 21.65 12.25 22ZM18 23C16.6167 23 15.4375 22.5125 14.4625 21.5375C13.4875 20.5625 13 19.3833 13 18C13 16.6167 13.4875 15.4375 14.4625 14.4625C15.4375 13.4875 16.6167 13 18 13C19.3833 13 20.5625 13.4875 21.5375 14.4625C22.5125 15.4375 23 16.6167 23 18C23 19.3833 22.5125 20.5625 21.5375 21.5375C20.5625 22.5125 19.3833 23 18 23Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M21 20.9998C21.4861 20.9998 21.8993 20.8297 22.2395 20.4894C22.5798 20.1491 22.75 19.7359 22.75 19.2498C22.75 18.7637 22.5798 18.3505 22.2395 18.0103C21.8993 17.67 21.4861 17.4998 21 17.4998C20.5138 17.4998 20.1007 17.67 19.7604 18.0103C19.4201 18.3505 19.25 18.7637 19.25 19.2498C19.25 19.7359 19.4201 20.1491 19.7604 20.4894C20.1007 20.8297 20.5138 20.9998 21 20.9998ZM21 24.4998C21.5833 24.4998 22.1277 24.3637 22.6333 24.0915C23.1388 23.8193 23.5569 23.4401 23.8875 22.954C23.4402 22.6818 22.9736 22.4825 22.4875 22.3561C22.0013 22.2297 21.5055 22.1665 21 22.1665C20.4944 22.1665 19.9986 22.2297 19.5125 22.3561C19.0263 22.4825 18.5597 22.6818 18.1125 22.954C18.443 23.4401 18.8611 23.8193 19.3666 24.0915C19.8722 24.3637 20.4166 24.4998 21 24.4998ZM10.5 9.33317H17.5V6.99984C17.5 6.02761 17.1597 5.20123 16.4791 4.52067C15.7986 3.84011 14.9722 3.49984 14 3.49984C13.0277 3.49984 12.2013 3.84011 11.5208 4.52067C10.8402 5.20123 10.5 6.02761 10.5 6.99984V9.33317ZM14.2916 25.6665H6.99996C6.35829 25.6665 5.80899 25.438 5.35204 24.9811C4.8951 24.5241 4.66663 23.9748 4.66663 23.3332V11.6665C4.66663 11.0248 4.8951 10.4755 5.35204 10.0186C5.80899 9.56164 6.35829 9.33317 6.99996 9.33317H8.16663V6.99984C8.16663 5.38595 8.73538 4.01025 9.87288 2.87275C11.0104 1.73525 12.3861 1.1665 14 1.1665C15.6138 1.1665 16.9895 1.73525 18.127 2.87275C19.2645 4.01025 19.8333 5.38595 19.8333 6.99984V9.33317H21C21.6416 9.33317 22.1909 9.56164 22.6479 10.0186C23.1048 10.4755 23.3333 11.0248 23.3333 11.6665V13.1832C22.9833 13.0665 22.6187 12.979 22.2395 12.9207C21.8604 12.8623 21.4472 12.8332 21 12.8332V11.6665H6.99996V23.3332H13.1833C13.3388 23.7998 13.4944 24.2033 13.65 24.5436C13.8055 24.8839 14.0194 25.2582 14.2916 25.6665ZM21 26.8332C19.3861 26.8332 18.0104 26.2644 16.8729 25.1269C15.7354 23.9894 15.1666 22.6137 15.1666 20.9998C15.1666 19.3859 15.7354 18.0103 16.8729 16.8728C18.0104 15.7353 19.3861 15.1665 21 15.1665C22.6138 15.1665 23.9895 15.7353 25.127 16.8728C26.2645 18.0103 26.8333 19.3859 26.8333 20.9998C26.8333 22.6137 26.2645 23.9894 25.127 25.1269C23.9895 26.2644 22.6138 26.8332 21 26.8332Z", fill: "currentColor" })))));
+  }
+  static get style() { return swirlIconCss; }
+}, [1, "swirl-icon-lock-person", {
+    "size": [2]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-icon-lock-person"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-icon-lock-person":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlIconLockPerson$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlIconLockPerson = SwirlIconLockPerson$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlIconLockPerson, defineCustomElement };

package/dist/components/swirl-icon-unlock-person.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlIconUnlockPerson extends Components.SwirlIconUnlockPerson, HTMLElement {}
+export const SwirlIconUnlockPerson: {
+  prototype: SwirlIconUnlockPerson;
+  new (): SwirlIconUnlockPerson;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;